Bootstrap 4 (alpha 6) centré et chevauche son get marque toggler

Question

Lorsque vous utilisez navbar et contenant dans Bootrap 4 (alpha 6) comme

<nav class="navbar navbar-static-top navbar-toggleable-md navbar-light bg-faded"> 

<div class="container"> 

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-toggler-div" aria-controls="navbar-toggler-div" aria-expanded="false" aria-label="Navigation"> 
     <i class="fa fa-bars"></i> 
    </button> 

    <a class="navbar-brand" href="/"> 
     Band name here 
    </a> 

    <div class="collapse navbar-collapse" id="navbar-toggler-div"> 

     <ul class="navbar-nav"> 

      <li class="nav-item"> 
       <a class="nav-link" href="#">Foo</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link" href="#">Bar</a> 
      </li> 

     </ul> 

    </div> 

</div> 

et lorsque l'écran est très petit (comme sur les téléphones cellulaires) le logo de la marque/texte (peu importe) et chevilles à * se centrer * ne se chevauchent (basculeur est pas à côté de la marque, mais « sur » il)

Ceci est valable pour d'autres types de barre de navigation (fixes -top, par défaut), aussi. Lorsque vous supprimez «conteneur» après l'élément nav, tout va bien.

J'ai besoin du conteneur div pour avoir une barre de navigation pleine largeur mais qui est lui-même "centré" (comme le contenu suivant).

Answer 1

Vous avez un autre conteneur flexbox <div class="container"> dans votre menu <nav> qui ne devrait pas être présent, et bootstrap essaie donc d'aligner automatiquement tous les éléments au centre. Retirez ce div et cela fonctionne.

Voici votre violon mis à jour avec le <div class="container"> enlevé: https://jsfiddle.net/p47Lqb9f/1/

Answer 2

je pouvais "résoudre" en ajoutant le suivant pour le css conteneur

@media (max-width: 576px) { 
    nav .container { 
     width: 100%; 
    } 
} 

@Escher: Le .container après nav est également dans le css officiel de BS 4, ainsi que dans leur documentation. Donc je crois que c'est prévu.