当textBox是第一个时，从3个元素启动输入组

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