Bootstrap 3：滚动条答案

【问题标题】：Bootstrap 3: Scroll barsBootstrap 3：滚动条
【发布时间】：2013-09-28 16:17:36
【问题描述】：

我正在使用 Bootstrap 3，并且在侧导航中有一个主题列表。 sidenav 很长，我想在 sidenav 内部有一个滚动条，在必须向下滚动之前显示 8 个元素。

下面是我的代码：

 <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"   style="float:left">
      <div class="well sidebar-nav">
        <ul class="nav">
          <li><strong>Select a subject</strong></li>
          <li class="active"><a href="#">Maths</a></li>
          <li><a href="#">English</a></li>
          <li><a href="#">Art and Design</a></li>
          <li><a href="#">Drama</a></li>
          <li><a href="#">Music</a></li>
          <li><a href="#">Physics</a></li>
          <li><a href="#">Chemistry</a></li>
          <li><a href="#">Biology</a></li>
          <li><a href="#">Home economics</a></li>
          <li><a href="#">Physical Education</a></li>
          <li><a href="#">Computing Science</a></li>
          <li><a href="#">French</a></li>
          <li><a href="#">German</a></li>
          <li><a href="#">Mandarin</a></li>
          <li><a href="#">Religious Education</a></li>
          <li><a href="#">Modern Studies</a></li>
          <li><a href="#">Geography</a></li>
          <li><a href="#">History</a></li>
          <li><a href="#">Creative computing</a></li>
          <li><a href="#">Craft, Design and Technology</a></li>
        </ul>
      </div><!--/.well -->
    </div><!--/span-->
  </div><!--/row-->

【问题讨论】：

标签： javascript html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您需要使用如下溢出选项：

.nav{
    max-height: 300px;
    overflow-y: scroll; 
}

根据需要显示的项目数量更改高度

【讨论】：

好的，将滚动条添加到 sidenav 的 html 是什么？
@AmirHoseinian 我有滚动条。现在我可以使用任何 javascript 将列表滚动到顶部吗？ jQuery 也可以。

【解决方案2】：

您需要使用溢出选项，但需要使用以下参数：

.nav {
    max-height:300px;
    overflow-y:auto;  
}

使用 overflow-y:auto; 这样滚动条只会在内容超过最大高度时出现。

如果您使用overflow-y:scroll，滚动条将始终可见 - 在所有 .nav 上 - 无论内容是否超过最大高度。

大概你想要一些能适应内容而不是相反的东西。

希望对你有帮助

【讨论】：