CSS 带有 Bootstrap 的可滚动菜单 - 菜单在不应该扩展其容器时
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19227496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrollable Menu with Bootstrap - Menu expanding its container when it should not
提问by eliashdezr
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.
我尝试了这种方法（他们的小提琴）来使用 Bootstrap 启用可滚动菜单，但是使用这种方法，可滚动菜单扩展了它的容器 -小提琴- 正确地，不可滚动菜单不会这样做。
How can I fix this? Suggestions on other approaches compatible with Bootstrap are appreciated too!
我怎样才能解决这个问题？对与 Bootstrap 兼容的其他方法的建议也表示赞赏！
For reference, here is the HTML from the first method's fiddle:
作为参考，这里是第一种方法的小提琴的 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>
And the CSS:
和 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
}
回答by Zim
I think you can simplify this by just adding the necessary CSS properties to your special scrollable menu class..
我认为您可以通过将必要的 CSS 属性添加到您的特殊可滚动菜单类来简化此操作。
CSS:
CSS：
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
HTML
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://www.bootply.com/86116
工作示例：https: //www.bootply.com/86116
Bootstrap 4
引导程序 4
回答by Adrian Hedley
You can use the built-in CSS class pre-scrollablein bootstrap 3 inside the span element of the dropdown and it works immediately without implementing custom css.
您可以在下拉列表的 span 元素内的 bootstrap 3 中使用内置 CSS 类pre-scrollable，它可以立即工作，而无需实现自定义 css。
<ul class="dropdown-menu pre-scrollable">
<li>item 1 </li>
<li>item 2 </li>
</ul>
回答by blalond
For CSS, I found that max height of 180 is better for mobile phones landscape 320 when showing browser chrome.
对于 CSS，我发现在显示浏览器 chrome 时，最大高度 180 更适合手机横向 320。
.scrollable-menu {
height: auto;
max-height: 180px;
overflow-x: hidden;
}
Also, to add visible scrollbars, this CSS should do the trick:
此外，要添加可见的滚动条，这个 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);
}
The changes are reflected here: https://www.bootply.com/BhkCKFEELL
更改反映在此处：https: //www.bootply.com/BhkCKFEELL
回答by Rajeshwar Reddy
Do everything in the inline of UL tag
在 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>
回答by Jilani A
I just fix this problem in my project-
我只是在我的项目中解决了这个问题-
CSS code
CSS代码
.scroll-menu{
min-width: 220px;
max-height: 90vh;
overflow: auto;
}
HTML code
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>
回答by Darshak Malvi
i hope this code is work well,try this.
我希望这段代码运行良好，试试这个。
add css file.
添加css文件。
.scrollbar {
height: auto;
max-height: 180px;
overflow-x: hidden;
}
HTML code:
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>
