부트 스트랩 3 : 스크롤 막대

Question

부트 스트랩 3을 사용 중이며 사이드 탐색에 피사체 목록이 있습니다. sidenav는 길고 아래로 스크롤해야하기 전에 8 개의 요소를 표시하는 sidenav 내부에 스크롤바가 있습니다. 당신은 아래와 같이 오버 플로우 옵션을 사용할 필요가

<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

: 여기

아래 내 코드 당신이

Answer 2

을 보여줄 필요가 항목의 양에 따라

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

변경 높이 당신 오버플로 옵션을 사용해야하지만 다음 매개 변수가 필요합니다.

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

사용 overflow-y : auto;이므로 스크롤바는 내용이 최대 높이를 초과 할 때만 나타납니다.

overflow-y : scroll을 사용하는 경우 콘텐츠가 최대 높이를 초과하는지 여부에 관계없이 모든 .nav의 스크롤바가 항상 표시됩니다.

아마 당신은 그 반대가 아닌 내용에 적응하는 무언가를 원할 것입니다.

희망 하시겠습니까?