在 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。