增加引导下拉菜单宽度

Posted

技术标签:

【中文标题】增加引导下拉菜单宽度【英文标题】:Increase bootstrap dropdown menu width 【发布时间】:2014-05-27 08:32:16 【问题描述】:

想知道是否有人对如何增加下拉菜单的宽度有任何提示?

我有一行包含两列,其中包含一些 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>

【问题讨论】:

你的 CSS 在哪里?这是一个 JS Fiddel,您可以在其中添加它,向我们展示:jsfiddle.net/h53UE/1 【参考方案1】:

2018 年更新

你应该可以像这样使用 CSS 设置它..

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

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


Bootstrap 4 中的no extra 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

【讨论】:

OP 专门请求引导程序帮助。我正在寻找同样的东西。您的答案是针对 CSS 的。 -1. 下拉菜单的目的是一个上下文菜单,所以它的意图是它不是是全角的,这就是 Bootstrap 使用设置最小宽度的原因。仅仅因为它是 width:100% 就使用 col-*-12 是个坏主意,并且会失败 bootlint。在这种情况下,首选 CSS 覆盖,并与文档中推荐的用于定位下拉菜单的内容保持一致。【参考方案2】:

添加以下css类

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

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

【讨论】:

请注意,!important 部分不是必需的,如果可能,通常应避免使用。如果没有 !important 就无法正常工作,请确保先包含引导 CSS,然后再对其进行自定义。 这不能回答这个问题,它特别适用于引导程序。 Rich 的回答是对该查询的唯一实际回答。 -1 使用col-*-12 是错误的,因为它只能在rowform-group. And you may want to use @media (min-width: 768px) 和also min-width` 之后使用,而不是width .加上删除height,因为这对响应能力要好得多。见bootlint.com 你可以在没有!important的情况下更改min-width【参考方案3】:

例如,您可以将“col-xs-12”类添加到包含列表项的&lt;ul&gt;

<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 匹配:

【讨论】:

这实际上是唯一正确的解决方案。否决它的人可能错过了这个问题与引导程序有关的事实,而不仅仅是 CSS。 这不是col-xs-12 的预期目的,它是用于网格布局的,应该在row 中使用always be contained。【参考方案4】:

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

.dropdown-menu 
  width:100%;

【讨论】:

【参考方案5】:

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

此外,当屏幕小于 768 像素或窗口(包含下拉菜单)缩小到小于 768 像素时,Bootstrap 3 会响应地将下拉菜单缩放到屏幕/窗口的整个宽度。我们需要保持这种响应式操作。

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

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

(我在我的网络应用中使用过它。)

【讨论】:

【参考方案6】:

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

.dropdown-menu 
    white-space: nowrap;

【讨论】:

最佳解决方案。谢了。【参考方案7】:

如果你有 BS4,另一个选择可能是:

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


.dropdown-menu 

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

【讨论】:

请注意此选项的使用限制:caniuse.com/?search=max-content

以上是关于增加引导下拉菜单宽度的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 导航栏链接宽度意外扩展

SharePoint Online 开发:修改站点导航宽度和下拉菜单

引导导航下拉菜单切换问题

多级下拉引导

Twitter 引导拆分下拉菜单

引导下拉菜单在单击时关闭