從3個元素引導輸入組，當textBox是第一個時

Question

我想用Filter（下拉菜單）創建搜索控件，但是我不能使它變得美麗。

http://jsfiddle.net/d2L9afh3/1/這裏是例子 - 我的下拉式和其他控件看起來不完全一樣。

<div class="container"> 
<div class="row">  
    <div class="col-xs-8 col-xs-offset-2"> 
     <div class="input-group">  
      <input type="text" class="form-control" name="x" placeholder="Search term..."/> 
      <div class="input-group-btn search-panel"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
        <span id="search_concept">Filter by</span> <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#contains">Contains</a></li> 
        <li><a href="#its_equal">It's equal</a></li> 
        <li><a href="#greather_than">Greather than ></a></li> 
        <li><a href="#less_than">Less than < </a></li> 
        <li class="divider"></li> 
        <li><a href="#all">Anything</a></li> 
       </ul> 
      </div> 
      <span class="input-group-btn"> 
       <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> 
      </span> 
     </div> 
    </div> 
</div> 

Answer 1

你有沒有進口引導腳本嗎？

Answer 2

好了，我不知道爲什麼它是（也許是因爲它是一個按鈕，它與圓角定義）......但是你可以重寫它：

<button type="button" class="btn btn-default dropdown-toggle corners" data-toggle="dropdown"> 

CSS：

.corners 
{ 
    border-top-right-radius: 0px; 
    border-bottom-right-radius: 0px; 

    border-top-left-radius: 0px; 
    border-bottom-left-radius: 0px; 
} 

Answer 3

可否請你看看演示，希望它可以幫助你

http://jsfiddle.net/d2L9afh3/4/

CSS：

.search-panel .btn{border-radius:0; border-left:0;}