Bootstrap 3: Thanh cuộn

Question

Tôi đang sử dụng Bootstrap 3 và có danh sách các đối tượng bên trong một nav bên. Sidenav là dài và tôi muốn làm cho nó rằng có một thanh cuộn bên trong của sidenav hiển thị 8 yếu tố trước khi phải di chuyển xuống.

Đây là mã của tôi dưới đây:

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

Answer 1

Bạn cần phải sử dụng tùy chọn tràn như dưới đây:

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

Thay đổi chiều cao theo số lượng các mặt hàng bạn cần phải chứng minh

Answer 2

Bạn cần sử dụng tùy chọn tràn, nhưng với các thông số sau:

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

Sử dụng tràn-y: tự động; do đó thanh cuộn chỉ xuất hiện khi nội dung vượt quá chiều cao tối đa.

Nếu bạn sử dụng tràn-y: cuộn, thanh cuộn sẽ luôn hiển thị - trên tất cả .nav - bất kể nội dung có vượt quá độ cao tối đa hay không.

Có lẽ bạn muốn thứ gì đó thích nghi với nội dung thay vì ngược lại.

Hy vọng điều này có thể hữu ích