如何使引导程序下拉框填充整个宽度

Question

默认情况下，引导程序上的下拉列表根据所选项目的文本长度是动态的。这将打破我的布局的和谐，我找不到解决方案。

基本上我想要一个包含搜索输入的行，并在右侧有一个保存框。一些非常简单的...如何使这成为可能？

<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