- 首页
- 前端开发
- 带有 Bootstrap 的可滚动菜单 - 菜单在不应该扩展其容器时
带有 Bootstrap 的可滚动菜单 - 菜单在不应该扩展其容器时
[英] Scrollable Menu with Bootstrap - Menu expanding its container when it should not
本文介绍了带有 Bootstrap 的可滚动菜单 - 菜单在不应该扩展其容器时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试了这种方法(他们的小提琴) 以使用 Bootstrap 启用可滚动菜单，但使用这种方法，可滚动菜单扩展其容器 -- fiddle -- 不可滚动的菜单，正确地，不会这样做.
我该如何解决这个问题?对与 Bootstrap 兼容的其他方法的建议也很感激！
<小时>
作为参考，这里是第一个方法的小提琴中的 HTML:
<li class="下拉菜单"><a class="icon-key icon-white" data-toggle="dropdown" href="#" style=字体粗细:粗体"></a><div class="dropdown-menu" style="margin-left: 2em"><ul class="下拉菜单"><!-- 静态不可滚动菜单标题 1 -->
<div class="dropdown-menu" style="margin-left: 2em"><ul class="下拉菜单">
<a href="#"><i class="icon-group"></i><b>我的群组</b></a><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="#">用户</a><li><a href="#">管理员</a><li><a href="#">其他一些组</a>
<ul class="dropdown-menu scroll-menu scroll-menu-2x"><!-- 为简洁起见省略了其他菜单项-->
<div class="dropdown-menu" style="margin-left: 2em"><ul class="下拉菜单"><!-- 静态不可滚动菜单标题 2 -->
<div class="dropdown-menu" style="margin-left: 2em"><ul class="下拉菜单">
<a href="#"><i class="icon-user"></i><b>我的角色</b></a><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="#">核心用户</a><li><a href="#">管理员</a><li><a href="#">其他一些角色</a>
<ul class="dropdown-menu scroll-menu scroll-menu-2x"><!-- 为简洁起见省略了其他菜单项-->
<div class="dropdown-menu" style="margin-left: 2em"><ul class="下拉菜单"><!-- 静态不可滚动菜单页脚-->
<ul class="下拉菜单">
<a href="#"><i class="icon-chevron-up pull-left"></i><i class="icon-chevron-up pull-right"></i></a>和 CSS:
/* 所以我们不会影响原来的引导菜单或者它是伪调用箭头 菜单包含在带有链接滚动菜单的子下拉菜单中 */ul.scroll-菜单{位置:相对；显示:继承！重要；溢出-x:自动；-webkit-overflow-scrolling:touch;-moz 溢出滚动:触摸；-ms-overflow-scrolling:touch;-o-溢出滚动:触摸；溢出滚动:触摸；顶部:0！重要；左:0！重要；宽度:100%；高度:自动；最大高度:500px；保证金:0;左边界:无；边界右:无；-webkit-border-radius:0!important;-moz-border-radius:0!important;-ms-border-radius:0!important;-o-border-radius:0!important;边界半径:0！重要；-webkit-box-shadow:无；-moz-box-shadow:无；-ms-box-shadow:无；-o-box-shadow:无；框阴影:无}
解决方案
Bootstrap 5(2021 年更新)
BS 5 的下拉标记已更改，因为 data- 属性已更改为 data-bs-.但是，设置 max-height 仍然可以使下拉菜单可滚动...
.dropdown-menu {最大高度:280px；溢出-y:自动；}
https://codeply.com/p/shJzHGE84z
引导程序 4(2018 年更新)
BS 4 的下拉标记已更改，因为项目具有自己的 dropdown-item 类.但是，设置 max-height 仍然可以使下拉列表可滚动...
.dropdown-menu {最大高度:280px；溢出-y:自动；}
Bootstrap 可滚动下拉菜单
使用 flexbox 的 Bootstrap 4 的替代水平菜单
引导程序 3(原始答案)
我认为您可以通过向特殊的可滚动菜单类添加必要的 CSS 属性来简化此操作..
CSS:
.scrollable-menu {高度:自动；最大高度:200px；溢出-x:隐藏；}
HTML
工作示例:https://codeply.com/p/ox7JC49vmT
I tried this method (their fiddle) to enable scrollable menu with Bootstrap, but with that approach, the scrollable menu expands its container -- fiddle -- the non-scrollable menu, correctly, does not do this.
How can I fix this? Suggestions on other approaches compatible with Bootstrap are appreciated too!
For reference, here is the HTML from the first method's fiddle:
<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>
And the 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
}
解决方案
Bootstrap 5 (update 2021)
The dropdown markup has changed for BS 5 as the data- attributes have changed to data-bs-. However, setting max-height still works to make the dropdown scrollable...
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
https://codeply.com/p/shJzHGE84z
Bootstrap 4 (update 2018)
The dropdown markup has changed for BS 4 as the items have their own dropdown-item class. However, setting max-height still works to make the dropdown scrollable...
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
Bootstrap scrollable dropdown
Alternative horizontal menu for Bootstrap 4 using flexbox
Bootstrap 3 (original answer)
I think you can simplify this by just adding the necessary CSS properties to your special scrollable menu class..
CSS:
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
HTML
<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>
Working example: https://codeply.com/p/ox7JC49vmT
这篇关于带有 Bootstrap 的可滚动菜单 - 菜单在不应该扩展其容器时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
