Бутстрап 3: Полосы прокрутки

Я использую Bootstrap 3 и имею список предметов внутри боковой навигационной системы. Сиднав длинный, и я хотел бы сделать так, что внутри сиденава есть полоса прокрутки, которая отображает 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-->

Ответ 1

Вам нужно использовать опцию переполнения, как показано ниже:

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

Измените высоту в соответствии с количеством элементов, которые вам нужно показать

Ответ 2

Вам нужно использовать опцию переполнения, но со следующими параметрами:

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

Используйте overflow-y: auto;, чтобы полоса прокрутки появлялась только тогда, когда содержимое превышает максимальную высоту.

Если вы используете переполнение-y: прокрутка, полоса прокрутки всегда будет видна - на всех .nav - независимо от того, превышает ли содержимое максимальное значение высоты или нет.

Предположительно вы хотите что-то, что адаптируется к контенту, а не наоборот.

Надеюсь, что это может быть полезно