bootstrap怎么给左侧导航栏上下滚动
时间: 2024-03-20 20:33:40 浏览: 107
Bootstrap并没有提供左侧导航栏上下滚动的功能,你可以通过自定义CSS来实现。以下是一种实现方式:
1. 在导航栏的外层包裹一个固定高度的div,并设置overflow-y属性为scroll。例如:
```
<div class="nav-scroll">
<ul class="nav">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单7</a></li>
<li><a href="#">菜单8</a></li>
<li><a href="#">菜单9</a></li>
<li><a href="#">菜单10</a></li>
</ul>
</div>
.nav-scroll {
height: 200px;
overflow-y: scroll;
}
```
2. 对于固定高度的导航栏,为了保证显示效果,建议将导航栏中的每个菜单项设置为固定高度。例如:
```
.nav-scroll .nav li {
height: 30px;
}
```
这样就可以让左侧导航栏在超出高度限制时出现滚动条,使用滚动条可以实现上下滚动。
阅读全文