在bootstrap中搜索文本字段内的下拉列表

Question

我尝试在搜索文本字段

中创建一个带下拉列表的搜索框

现在这是我的结果：

http://www.bootply.com/46drKn8dRs#

但我更喜欢下拉是在右边，有什么帮助吗？

Answer 1

这就是我修复它的方法：

.btn.dropdown-toggle{
  border-radius:0;
}

Here is your updated Bootply

我移动了元素并添加了上面的CSS代码。

Answer 2

如果你想将de dropdown移到右边，你可以在搜索文本字段之后移动所有标记，如下所示：

<div class="row">
 <div class="col-md-6">
    <div class="form-horizontal">
      <div class="input-group">              
        <input id="txtkey" type="text" class="form-control" placeholder="Enter here" aria-describedby="ddlsearch">
        <div class="ddl-select input-group-btn">
          <select id="ddlsearch" class="selectpicker form-control" data-style="btn-primary">
            <option value="france">France</option>
            <option value="austria">Austraia</option>
            <option value="usa">usa</option>
          </select>
        </div>
        <span class="input-group-btn">
          <button id="btn-search" class="btn btn-info" type="button"><i class="fa fa-search fa-fw"></i></button>
        </span>
      </div>
    </div>
  </div>
</div>