增加引导下拉菜单宽度

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（演示）。

---

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

Answer 2

添加以下 css 类

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

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

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 相匹配：

Answer 4

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

标签。

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

Answer 5

通常我们有控制下拉菜单宽度的需求；特别是当下拉菜单包含表单时，这一点至关重要，例如登录表单 --- 那么下拉菜单及其项目应该足够宽，以便于输入用户名/电子邮件和密码。

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

因此，以下 css 类可以做到这一点：

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

（我在我的网络应用程序中使用过它。）

Answer 6

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

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

.dropdown-menu {

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

Answer 7

通常希望使菜单宽度与下拉父级的宽度相匹配。这可以很容易地实现，如下所示：

.dropdown-menu {
  width:100%;
}

Answer 8

您只需将

d-inline-block

 类添加到您的下拉菜单中，并将 

w-100

 类添加到您的下拉菜单中

<div class="dropdown d-inline-block">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Answer 9

如果您愿意，您可以设置：

width: fit-content; 为了使下拉菜单占据其内容所需的空间。