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

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

1 个答案: