Comment organiser un menu Bootstrap 4 avec trop d'éléments

Question

J'essaie de comprendre comment organiser un menu Bootstrap 4 quand j'ai beaucoup de liens de menu. À l'heure actuelle, lorsque je mets trop de liens, la barre de navigation ne se soucie pas du contenitor et étend sa largeur derrière le contenitor.

Voici une image pour mieux expliquer:

Je voudrais organiser le menu pour garder à l'intérieur du contenitor gris voix du menus même si j'ai trop de voix. Par exemple, comment faire si je veux aller dans la ligne ci-dessous en cas de voix trop nombreuses?

ici mon code:

<header> 
    <div class="container"> 
     <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
      </button> 
      <a class="navbar-brand" href="#"><img src="assets/img/logo.png" width="160px"></a> 
      <div class="collapse navbar-collapse" id="navbarNav"> 
      <ul class="navbar-nav mx-auto"> 
       <li class="nav-item text-center active"> 
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Features</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Pricing</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
      </ul> 
      </div> 
     </nav> 
    </div> 
</header> 

Answer 1

Vous pouvez utiliser colonne flex pour créer deux lignes dans un bootstrap 4 menu alpha.

<header> 
    <div class="container"> 
     <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
      </button> 
      <a class="navbar-brand" href="#"><img src="assets/img/logo.png" width="160px"></a> 
      <div class="collapse navbar-collapse flex-column" id="navbarNav"> 
      <ul class="navbar-nav mx-auto"> 
       <li class="nav-item text-center active"> 
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Features</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Pricing</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
      </ul> 
      <ul class="navbar-nav mx-auto"> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
       <li class="nav-item text-center"> 
       <a class="nav-link" href="#">Disabled</a> 
       </li> 
      </ul> 
      </div> 
     </nav> 
    </div> 
</header> 

La classe flex-column empile les deux étiquettes ul verticalement. J'espère que c'est ce que vous cherchez.