可滚动菜单与引导菜单扩展其容器时，它不应该

我尝试使用 这种方法(他们的小提琴)启用 Bootstrap 的可滚动菜单，但是使用这种方法，可滚动菜单扩展了它的容器—— 小提琴——不可滚动菜单，正确地说，没有做到这一点。

我如何解决这个问题? 建议其他方法兼容的 Bootstrap 也很感激！

作为参考，下面是第一个方法的 HTML 代码:

<ul class="nav">
<li class="dropdown">
<a class="icon-key icon-white" data-toggle="dropdown" href="#" style=
"font-weight: bold"></a>


<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 1 -->
</ul>
</div>


<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<a href="#"><i class="icon-group"></i> <b>My Groups</b></a>
</li>


<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
<a href="#">User</a>
</li>


<li>
<a href="#">Administrators</a>
</li>


<li>
<a href="#">Some Other Group</a>
</li>
</ul>
</div>


<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>


<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 2 -->
</ul>
</div>


<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<a href="#"><i class="icon-user"></i> <b>My Roles</b></a>
</li>


<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
<a href="#">Core Users</a>
</li>


<li>
<a href="#">Admin</a>
</li>


<li>
<a href="#">Some Other Role</a>
</li>
</ul>
</div>


<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>


<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu footer -->
</ul>
</div>


<ul class="dropdown-menu">
<li class="disabled">
<a href="#"><i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i></a>
</li>
</ul>
</li>
</ul>

还有 CSS:

/* So we wont impact the original bootstrap menu or it's pseudo call-out
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
position:relative;
display:inherit!important;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
-moz-overflow-scrolling:touch;
-ms-overflow-scrolling:touch;
-o-overflow-scrolling:touch;
overflow-scrolling:touch;
top:0!important;
left:0!important;
width:100%;
height:auto;
max-height:500px;
margin:0;
border-left:none;
border-right:none;
-webkit-border-radius:0!important;
-moz-border-radius:0!important;
-ms-border-radius:0!important;
-o-border-radius:0!important;
border-radius:0!important;
-webkit-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none
}
252873 次浏览
小开
最佳答案

Bootstrap 5(更新2021)

BS5的下拉标记已经改变，因为 data-属性已经改变为 data-bs-。但是，设置最大高度仍然可以使下拉菜单可滚动..。

.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}

Https://codeply.com/p/shjzhge84z

Bootstrap 4(更新2018)

BS4的下拉标记已经改变，因为项目有自己的 dropdown-item类。但是，设置 max-height仍然可以使下拉菜单可滚动..。

.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}

引导程序可滚动下拉列表

可选的水平菜单引导4使用柔性箱

引导程序3(原始答案)

我认为您可以简化这一点，只需添加必要的 CSS 属性到您的特殊滚动菜单类..。

CSS:

.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}

超文本标示语言

       <ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Action</a></li>
..
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>

工作示例: https://codeply.com/p/ox7JC49vmT

小开

对于 CSS，我发现最大高度为180更适合手机横向320显示浏览器铬。

.scrollable-menu {
height: auto;
max-height: 180px;
overflow-x: hidden;
}

此外，添加可见的滚动条，这个 CSS 应该做的技巧:

.scrollable-menu::-webkit-scrollbar {
-webkit-appearance: none;
width: 4px;
}
.scrollable-menu::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: lightgray;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);
}

这里反映了这些变化: https://www.bootply.com/BhkCKFEELL

小开

我希望这个代码工作良好，试试这个。

添加 css 文件。

.scrollbar {
height: auto;
max-height: 180px;
overflow-x: hidden;
}

HTML 代码:

<div class="col-sm-2  scrollable-menu" role="menu">
<div>
<ul>
<li><a class="active" href="#home">Tutorials</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>


</ul>
</div>
</div>
小开

在 UL 标签的内联中执行所有操作

<ul class="dropdown-menu scrollable-menu" role="menu" style="height: auto;max-height: 200px; overflow-x: hidden;">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Action</a></li>
..
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
小开

我只是在我的项目中解决这个问题-

CSS 代码

.scroll-menu{
min-width: 220px;
max-height: 90vh;
overflow: auto;
}

HTML 代码

<ul class="dropdown-menu scroll-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Action</a></li>
..
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
小开

您可以使用内置的 CSS 类 预滚动在引导3中的 span 元素内的下拉菜单，它不需要实现定制的 CSS 就可以立即工作。

 <ul class="dropdown-menu pre-scrollable">
<li>item 1 </li>
<li>item 2 </li>


</ul>

提交答案