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

请你看看演示，希望它可以帮助你

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

CSS：

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

Answer 2

您是否也导入了引导脚本？

Answer 3

好吧，我不知道为什么会这样做（也许是因为它是一个按钮，它是用圆角定义的）......但你可以覆盖它：

 <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;
}

当textBox是第一个时，来自3个元素的Bootstrap输入组

3 个答案: