增加引导下拉菜单宽度

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

添加以下css类

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

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

Answer 2

更新2018年

您应该能够使用这样的CSS来设置它。

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

这在引导3和引导4.0.0 (演示)中都是有效的。

没有额外的CSS选项在引导4中使用施胶功用来改变宽度。例如，在这里，下拉菜单使用w-100 (宽度: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

Answer 3

例如，您可以将一个"col-xs-12“类添加到包含列表项的<ul>中：

<div class="col-md-6" data-toggle="dropdown">
            First column
            <ul class="dropdown-menu col-xs-12" 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的列表宽度匹配，我相信：

​

​