jquery - 增加 Bootstrap 下拉菜单宽度

Question

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

我有一个包含两列的行，其中有一些 javascript，当被选中时可以上下滑动下拉菜单。我遇到的问题是我似乎无法弄清楚如何在选择时增加下拉列表宽度，理想情况下下拉列表将与列大小相匹配。但是发生的事情是下拉菜单宽度仅与下拉菜单中的文本大小相同，有人对如何增加下拉菜单宽度以匹配列大小有建议吗？

<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>

Answer 1

2018 年更新

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

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

这适用于 Bootstrap 3 和 Bootstrap 4.0.0 (demo) .

---

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