Я использую 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-->
Вам нужно использовать опцию переполнения, как показано ниже:
.nav{
max-height: 300px;
overflow-y: scroll;
}
Измените высоту в зависимости от количества элементов, которые вам нужно показать
Вам необходимо использовать опцию переполнения, но со следующими параметрами:
.nav {
max-height:300px;
overflow-y:auto;
}
Используйте overflow-y:auto;, чтобы полоса прокрутки появлялась только тогда, когда содержимое превышает максимальную высоту.
Если использовать overflow-y:scroll, полоса прокрутки будет видна всегда - на всех .nav - независимо от того, превышает ли содержимое максимальную высоту или нет.
Предположительно, вам нужно что-то, что адаптируется к содержимому, а не наоборот.
Надеюсь, это может быть полезно