带有Bootstrap 3的可滚动菜单 – 不应该展开它的容器的菜单
我试过这个方法 （ 他们的小提琴 ）来启用带有Bootstrap的可滚动菜单，但是通过这种方法，可滚动菜单正确地扩展了它的容器 – 小提琴 – 不可滚动的菜单。
我怎样才能解决这个问题？ 关于与Bootstrap兼容的其他方法的build议也被赞赏！
作为参考，这里是第一个方法的小提琴的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 }
我想你可以简化这个只需添加必要的CSS属性到你的特殊的可滚动菜单类。
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>
工作示例： http ： //bootply.com/86116
对于CSS，我发现在显示浏览器的Chrome浏览器时，手机横向320的最大高度为180更好。
.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>
我只是在我的项目中解决这个问题 –
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>
您可以在下拉菜单的span元素中的bootstrap 3中使用预先滚动的内置CSS类，它可以在不执行自定义CSS的情况下立即运行。
<ul class="dropdown-menu pre-scrollable"> <li>item 1 </li> <li>item 2 </li> </ul>
尽一切在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>
