在Bootstrap 3.0中设置下拉列表的宽度

Question

如何将bootstrap 3.0中下拉触发按钮的宽度设置为等于下拉列表的宽度？与使用bootstrap-select时所实现的类似(http://silviomoreto.github.io/bootstrap-select/).我试图将整个列表包装在一个带有col-*类的div中,但这似乎不起作用:

<div class="row">
<div class="col-xs-4 col-md-4">
    <div class="dropdown">
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Button</button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Action</a></li>
          </ul>
    </div>
</div>

因此,我想:按钮宽度=下拉菜单列表= col-*宽度.

Answer 1

我通过设置下拉菜单和按钮宽度= 100%找到了解决方案.

.dropdown-menu {
  width: 100%; 
}

.btn{
 width: 100%;
}

现在,按钮和下拉列表具有相同的宽度,由列宽控制.

Answer 2

如果我理解正确你想根据更大的选项设置菜单宽度的样式,你必须覆盖列表的min-width属性,.dropdown-menu如:

.dropdown-menu {
    min-width: 0px !important;
}

演示:http://jsfiddle.net/faxyz/4/

Answer 3

当下拉列表变得太小时,您可以设置.dropdown-toggle.我建议使用text-overflow省略号的宽度.风格没必要.dropdown-menu.如果要.input-group在网格中使用或不在网格中使用,可以将下拉列表的宽度设置为任何其他值.

.dropdown-toggle {   
    overflow: hidden;
    padding-right: 24px /* Optional for caret */;
    text-align: left;
    text-overflow: ellipsis;    
    width: 100%;
}

/* Optional for caret */
.dropdown-toggle .caret {
    position: absolute;
    right: 12px;
    top: calc(50% - 2px);
}