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

添加以下css类

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

当然,您可以使用符合您需要的东西.

Answer 2

例如,您可以添加一个"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的列表相匹配我相信:

Answer 3

更新2018年

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

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

这适用于Bootstrap 3和Bootstrap 4.0.0(演示).

一个没有额外的CSS中的选项引导4使用尺寸utils的改变宽度.例如,这里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 4

通常我们需要控制下拉菜单的宽度; 特别是当下拉菜单包含表单时必不可少,例如登录表单 - 然后下拉菜单及其项目应足够宽,以便于输入用户名/电子邮件和密码.

此外,当屏幕小于768px或当窗口(包含下拉菜单)缩小到小于768px时,Bootstrap 3会相应地将下拉菜单缩放到屏幕/窗口的整个宽度.我们需要保持这种反应行动.

因此,以下css类可以做到这一点:

@media (min-width: 768px) {
    .dropdown-menu {
        width: 300px !important;  /* change the number to whatever that you need */
    }
}

(我在我的网络应用程序中使用过它.)

Answer 5

文本永远不会换行到下一行。文本在同一行上继续，直到
遇到标记。

.dropdown-menu {
    white-space: nowrap;
}

Answer 6

通常希望将菜单宽度与下拉父项的宽度相匹配。这可以像这样轻松实现：

.dropdown-menu {
  width:100%;
}

Answer 7

如果您有 BS4，另一种选择可能是：

.dropdown-item { 
  width: max-content !important;
}

.dropdown-menu {

    max-height: max-content;
    max-width: max-content;
}