twitter-bootstrap Bootstrap 4 使下拉菜单可滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47645634/
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
bootstrap 4 making dropdown scrollable
提问by jmv
I have a problem with my drop down menu on smaller devices. i cannot make it scroll able when i tried the solution here (that is overflow:auto/ overflow-y:scroll) it's not working even if i use !important. What i'm able to scroll was my main page even if the drop down is open.
我在较小设备上的下拉菜单有问题。当我在这里尝试解决方案时，我无法让它滚动（即overflow:auto/overflow-y:scroll），即使我使用!important也无法工作。即使下拉菜单打开，我能够滚动的是我的主页。
<nav class="navbar navbar-toggleable-sm ">
<button class="navbar-toggler navbar-toggler-right main-navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav-collapse" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand animation" data-animation ="fadeInLeft" href="#"><img src="/093017/img/logo-tmi.png" alt="logo"/></a>
<div class="collapse navbar-collapse" id = "main-nav-collapse" >
<ul class="nav navbar-nav navbar-main mr-auto mt-2 mt-md-0 animation" data-animation = "fadeInRight">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Vehicles</a>
<div class="dropdown-menu default-menu main-menu sm-main-menu animation" data-animation = "fadeIn">
<!-- Nav tabs -->
<div class="sm-main-nav" >
<a class="dropdown-item" href="#">Cars</a><hr>
<a class="dropdown-item" href="#">Vans & Pickup</a><hr>
<a class="dropdown-item" href="#">SUVs & Crossover</a><hr>
<a class="dropdown-item" href="#">MPVs</a><hr>
<a class="dropdown-item" href="#">Hybrid</a><hr>
<a class="dropdown-item" href="#">Performance</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Owners</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Promotions</a>
</li>
</ul>
</div>
回答by Udhay Titus
just you can use @media in your css
只是你可以在你的 css 中使用 @media
@media (max-width: 500px) {
.dropdown-menu{
height:200px;
overflow-y:auto;
}
}
回答by vishal Nagarkar
Use max-height instead of height:
使用最大高度而不是高度：
.dropdown-menu {
max-height: 200px;
overflow-y: auto;
}
回答by cse_vikashgupta
You can use a custom class for scroll bar for dropdown list.
您可以将自定义类用于下拉列表的滚动条。
<div class="sm-main-nav customClassForDropDown" >
<a class="dropdown-item" href="#">Cars</a><hr>
<a class="dropdown-item" href="#">Vans & Pickup</a><hr>
<a class="dropdown-item" href="#">SUVs & Crossover</a><hr>
<a class="dropdown-item" href="#">MPVs</a><hr>
<a class="dropdown-item" href="#">Hybrid</a><hr>
<a class="dropdown-item" href="#">Performance</a>
</div>
This is the custom css class.
这是自定义 css 类。
.customClassForDropDown
{
height: 100px;
overflow-y: auto;
}
check this JSFIDDLE
检查这个JSFIDDLE
