web-dev-qa-db-fra.com

La barre d'icônes Bootstrap ne s'affiche pas

la barre d'icônes dans le menu de la barre de navigation de Bootstrap n'apparaissant pas lors du redimensionnement du navigateur:

http://jsbin.com/ixAqinA/1/

   <section class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/">
        brand
      </a>
    </div>
    </section>

vous pouvez voir l’exemple de JSBin en direct: http://jsbin.com/ixAqinA/1/

13
elkebirmed

Vous devez l'envelopper à l'intérieur

<nav class="navbar navbar-default" role="navigation"></nav>
23
Sanjo

J'avais un problème similaire, mais cette solution ne fonctionnait pas pour moi en raison de modifications apportées à Bootstrap.

Pour Bootstrap 3.1.1, j'avais besoin du style suivant pour afficher les barres d'icônes sur une barre de navigation colorée personnalisée fixée au sommet (de sorte que .navbar-default ne fonctionne pas)

.navbar-toggle .icon-bar{ background-color: #fff;}

Il suffit de changer #fff pour la couleur que vous souhaitez afficher.

5
Scone

Bootstrap 4 n’utilise plus .icon-bar. Il doit être fait comme ceci:

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

Pour plus de détails, vous devriez regarder ici ou dans la documentation de Bootstrap 4

2
theoretisch