增加引导下拉菜单宽度

Question

想知道是否有人对如何增加下拉宽度有任何提示？

我有一排包含两个列，上面有javaScript的AA位，在选择时上下下拉列表。我遇到的问题是我似乎无法弄清楚如何在选择时增加下拉列表宽度，理想情况下下拉列表将与列大小相匹配。但是发生的事情是下拉列表宽度仅与下拉列表中的文本大小相同有没有人对如何增加下拉宽度以匹配列大小有建议？

 <div class="row question">
        <div class="dropdown">
            <div class="col-md-6" data-toggle="dropdown">
                First column
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                </ul>
            </div>
        </div><!-- end of the dropdown -->
        <div class="dropdown">
            <div class="col-md-6" data-toggle="dropdown">
                second column
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                </ul>
            </div>
        </div>
    </div><!--end of the row question -->

<script>
     // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
    $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });

    // ADD SLIDEUP ANIMATION TO DROPDOWN //
    $('.dropdown').on('hide.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
    });
</script>

原文由 ChoclateLove 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加以下 css 类

.dropdown-menu {
    width: 300px !important;
    height: 400px !important;
}

当然，您可以使用符合您需要的东西。

原文由 Chuks 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

2018 年更新

你应该能够像这样使用 CSS 来设置它..

 .dropdown-menu {
  min-width:???px;
}

这适用于 Bootstrap 3 和 Bootstrap 4.0.0（演示） 。

---

Bootstrap 4 中 没有额外的 CSS 选项是使用 sizing utils 来更改宽度。例如，此处 w-100 (width:100%) 类用于下拉菜单以填充其父项的宽度….

  <ul class="dropdown-menu w-100">
      <li><a class="nav-link" href="#">Choice1</a></li>
      <li><a class="nav-link" href="#">Choice2</a></li>
      <li><a class="nav-link" href="#">Choice3</a></li>
 </ul>

https://www.codeply.com/go/pAqaPj59N0

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议