html - 加入 twitter bootstrap 搜索框和搜索按钮，并在搜索按钮的右侧弯曲

Question

这是我的引导代码

 <div class="input-append" align="center" > 
           <input type="text" name="q" class="span2 search-query" placeholder="Snipp or Tag"/> 

           <button type="submit" class="btn">Search</button> 

        </div>

这是一个jsfiddle

Search有没有办法加入搜索框和搜索按钮，也可以弯曲按钮的右侧

Answer 1

border-radius控制Search 按钮的 css 类是.form-search .input-append .btn. 要应用该类，请在具有该类的 div 周围添加一个表单或 div input-append。

像这样：

<div class="form-search">
 <div class="input-append"> 
  <input type="text" name="q" class="span2 search-query" placeholder="Snipp or Tag"/><button type="submit" class="btn">Search</button> 
 </div>
</div>

这是文档的链接，这是您的jsFiddle的更新。

Answer 2

只需添加这个。

input.search-query {
    -moz-border-top-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;

    -moz-border-bottom-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}