Bootstrap 3：滾動條

我使用的是Bootstrap 3，並有一個側面導航欄內的主題列表。 sidenav很長，我想讓它在sidenav裏面有一個滾動條，在向下滾動之前顯示8個元素。Bootstrap 3：滾動條

這裏是我下面的代碼：

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

來源

2013-09-23 Aidan

您需要使用溢出選項如下圖所示：

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

改變高度根據需要顯示

來源

2013-09-23 17:06:31

好吧，什麼是用於添加滾動條到sidenav的HTML？ – Aidan

你需要使用引導網格系統 http://getbootstrap.com/css/#grid –

@AmirHoseinian我有滾動條。現在我可以使用任何JavaScript將列表滾動到頂部？ jQuery也會很好。 – Parth

項目的金額你需要使用溢出選項，但使用以下參數：

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

使用overflow-y：auto;因此滾動條僅在內容超出最大高度時出現。

如果使用overflow-y：scroll，滾動條將始終可見 - 對所有.nav - 不管內容是否超過最大高度。

大概你想要一些適應內容的東西，而不是相反。

希望它有幫助

來源

2014-07-18 08:59:55 EdsonF

Bootstrap 3：滾動條

回答

相關問題