如何使bootstrap下拉列表填充整个col宽度

Question

默认情况下,引导程序的下拉列表是动态的,具体取决于所选项目的文本长度.这将破坏我的布局的和谐,我找不到解决方案.

基本上我想要一个包含搜索输入的行,而在右侧则需要一个Dropbox.非常简单......如何使这成为可能？

<div class="container-fluid">
<div class="row" id="searchAndLogin">
   <div class="col-md-9">
       <div class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
        </div>
    </div>
    <div class="col-md-3">
       <div class="btn-group">
          <button type="button" class="btn btn-default">Action</button>
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>
    </div>
</div>

Answer 1

btn-group您可以设置及其元素的宽度btn以及dropdown-menu来适应您放置它的列的宽度。

CSS

#searchAndLogin .btn-group {width:100%;}
#searchAndLogin .btn-group .btn {width:90%;}
#searchAndLogin .btn-group .btn.dropdown-toggle {width:10%;}
#searchAndLogin .btn-group .dropdown-menu {width:100%;}

现场示例： http: //www.bootply.com/WPhb5tLZmh