增加 Bootstrap 菜单宽度

uplii1fm  于 2023-11-15  发布在  Bootstrap
关注(0)|答案(9)|浏览(212)

想知道是否有人有任何提示如何增加的宽度?
我有一行包含两个列,有一点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>

字符串

35g0bw71

35g0bw711#

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

htrmnn0y

htrmnn0y2#

添加以下css类

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

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

smtd7mpg

smtd7mpg3#

例如,你可以添加一个“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:
x1c 0d1x的数据

3z6pesqy

3z6pesqy4#

文本永远不会换行到下一行。文本将继续在同一行上显示,直到
标签遇到了。

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

字符串

thtygnil

thtygnil5#

通常我们需要控制菜单的宽度;特别是当菜单包含一个表单时,这是必不可少的,例如登录表单-那么菜单及其项应该足够宽,以便于输入用户名/电子邮件和密码。
此外,当屏幕小于768 px或当窗口(包含屏幕菜单)缩小到小于768 px时,Bootstrap 3会响应地将屏幕菜单缩放到屏幕/窗口的整个宽度。我们需要保持这种响应动作。
因此,下面的CSS类可以做到这一点:

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

字符串
(我在我的网络应用程序中使用了它。

nr9pn0ug

nr9pn0ug6#

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

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

.dropdown-menu {

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

字符串

cvxl0en2

cvxl0en27#

通常情况下,我们希望将菜单宽度与父菜单的宽度相匹配。这可以很容易地实现,如下所示:

.dropdown-menu {
  width:100%;
}

字符串

yv5phkfx

yv5phkfx8#

您只需要将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>

字符串

nukf8bse

nukf8bse9#

如果需要,您可以设置:

width: fit-content;

字符串
以使下拉菜单占据其内容所需的空间。

相关问题