web-dev-qa-db-fra.com

Bootstrap 3: barres de défilement

J'utilise Bootstrap 3 et possède une liste de sujets dans une liste de navigation latérale. Le sidenav est long et j'aimerais faire en sorte qu'il y ait une barre de défilement à l'intérieur du sidenav qui affiche 8 éléments avant avoir à faire défiler.

Voici mon code ci-dessous:

 <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-->
javascripthtmltwitter-bootstraptwitter-bootstrap-3
30
Aidan

Vous devez utiliser l'option de débordement comme ci-dessous:

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

Changez la hauteur en fonction du nombre d'éléments à afficher.

75
Amir Hoseinian

Vous devez utiliser l'option de débordement, mais avec les paramètres suivants:

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

Utilisez overflow-y: auto; pour que la barre de défilement n'apparaisse que lorsque le contenu dépasse la hauteur maximale.

Si vous utilisez overflow-y: scroll, la barre de défilement sera toujours visible - sur tous les fichiers .nav - que le contenu dépasse la hauteur maximale ou non.

Vous voulez probablement quelque chose qui s'adapte au contenu plutôt que le contraire.

J'espère que cela peut être utile

43
EdsonF