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

问题描述

如何设置引导 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>

因此，我想：button width = dropdown menu list = col- * width 。

最佳解决办法

我通过设置 dropdown-menu 和按钮宽度= 100％找到解决方案。

.dropdown-menu {
  width: 100%; 
}

.btn{
 width: 100%;
}

现在，按钮和下拉列表都具有相同的宽度，由列宽控制。

次佳解决办法

如果我理解正确，您想根据较大的选项来设置菜单宽度，您必须覆盖.dropdown-menu 列表的 min-width 属性，如：

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

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

第三种解决办法

您可以设置.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);
}

参考文献

• Setting the width of a dropdown list in Bootstrap 3.0

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。