Bootstrap 3: スクロールバー

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-->
cweston
編集された質問 21日 12月 2015 в 9:22
プログラミング
javascript html twitter-bootstrap-3 twitter-bootstrap
23日 9月 2013 в 4:59
3 ビュー
ソリューション

以下のようにオーバーフローオプションを使用する必要があります：

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

表示するアイテムの量に応じて高さを変更してください。

Mertcan Diken
編集した答え 21日 7月 2018 в 4:30
解説 (3)

オーバーフローオプションを使用する必要があるが、以下のパラメータが必要である：

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

overflow-y:auto;**を使用して、コンテンツが最大の高さを超えたときだけスクロールバーが表示されるようにします。

overflow-y:scrollを使用すると、コンテンツが最大の高さを超えているかどうかに関係なく、すべての.navで常にスクロールバーが表示されます。

おそらく、あなたはコンテンツに適応する何かが欲しいのでしょう。

参考になれば幸いです。

解説 (0)