带有 Bootstrap 的可滚动菜单 - 菜单在不应该扩展其容器时

引导程序 5（2021 年更新）

BS 5 的下拉标记已更改，因为 data- 属性已更改为 data-bs-。但是，设置 max-height 仍然可以使下拉列表可滚动...

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

https://codeply.com/p/shJzHGE84z

引导程序 4（2018 年更新）

BS 4 的下拉标记已更改，因为这些项目有自己的 dropdown-item 类。但是，设置 max-height 仍然可以使下拉列表可滚动...

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

Bootstrap scrollable dropdown

Alternative horizontal menu for Bootstrap 4 using flexbox

Bootstrap 3（原始答案）

我认为您可以通过将必要的 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>

工作示例：https://codeply.com/p/ox7JC49vmT

---

您可以在下拉菜单的 span 元素内使用 bootstrap 3 中可预滚动的内置 CSS 类，它可以立即工作而无需实现自定义 CSS。

 <ul class="dropdown-menu pre-scrollable">
                <li>item 1 </li>
                <li>item 2 </li>

 </ul>

---

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

---

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

---

我只是在我的项目中解决了这个问题-

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>

---

我希望这段代码运行良好，试试这个。

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

---