Bootstrap 4：如何使下拉菜单可滚动？

Question

我在小设备上遇到了下拉菜单的问题。我尝试使用这里提供的解决方案（即 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>

- jmv

---

你尝试过使用 overflow: scroll 并给你的导航栏足够的高度吗？ - Smokey Dawson

Answer 1

你可以在 CSS 中使用 @media。

@media (max-width: 500px) {
    .dropdown-menu{
        height:200px;
        overflow-y:auto;
    }
}

- Udhay Titus

Answer 2

使用max-height代替height：

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

- vishal Nagarkar

Answer 3

我的建议是，不要在像素中进行硬编码高度，而是可以利用视口高度的优势，比如将此样式添加到您的下拉菜单项或在类级别上添加

内联

style="overflow-y:auto; max-height:80vh"

每个下拉菜单

.dropdown-menu {
 overflow-y:auto; 
 max-height:80vh
}

- Devesh

Answer 4

您可以为下拉列表使用自定义滚动条类。

<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>

这是自定义的CSS类。

 .customClassForDropDown
    {
       height: 100px;
       overflow-y: auto;
    }

检查这个 JSFIDDLE。

- Vikas Gupta