web-dev-qa-db-fra.com

Barre de navigation Bootstrap justifier/étendre les éléments de menu occupant toute la largeur

J'utilise la barre de navigation réactive Twitter Bootstrap par défaut (sans le logo et la recherche), mais je souhaite que les éléments de menu soient étendus et occupent toute la largeur de la barre de menu.

Voici ce que j'ai maintenant la barre de navigation Bootstrap par défaut (voir --- sous forme d'espaces):

[home | menu item 1 | menu item 2 | menu item 3 | contact------------------------]

et le résultat que j'aime avoir (éléments de menu occupant toute la largeur):

[--home-- | ---menu item 1--- | ---menu item 2--- | ---menu item 3--- | -contact-]

J'espère que quelqu'un peut aider.

htmltwitter-bootstrapnavbar
27
user2024774

Jetez un oeil à exemple officiel :

/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}

.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .75);
    border-right: 1px solid rgba(0, 0, 0, .1);
}

.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}
32
sgrodzicki

L'exemple officiel fonctionne parfaitement jusqu'à ce que vous souhaitiez utiliser ces éléments de menu avec les listes déroulantes natives. La liste déroulante devient la largeur de tous vos éléments combinés. 

* notez le ">", cela arrêtera le style dans le sous-ensemble .dropdown-menu.

/* Customize the navbar links to be fill the entire space of the .navbar */

.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav > li {
    display: table-cell;
    width: 1%;
    float: none;
    text-align: center;
}


.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}
8
Seif Thompson-Doss
.nav {
  display:table;
}
.nav > li{
  width: auto;
  display:table-cell;
}

" width: auto; " a résolu le problème pour moi

7
Veikko Karsikko

Une autre solution: les requêtes multimédia qui règlent le remplissage du menu pour chaque élément:

@media (max-width: 1200px) {

  .navbar .nav > li {
      padding: 0 4px 0 3px;
  }

}

@media (min-width: 1200px) {

  .navbar .nav > li {
      padding: 0 20px 0 20px;
  }

}
4
Jonathan James

ce dernier exemple ici, ne fonctionne pas pour moi non plus, le menu déroulant apparaît toujours au premier élément li.

définir la largeur des principaux éléments li avec jQuery est la seule chose qui a fonctionné pour moi, à l'instar de

setNavWidth: function(){
    var wi = parseInt(($('#navcontainer').width()-48)*.25);
    for( var i = 0 ; i < 4; i++){
        $('#carvernavli_'+i).width(wi);
    }

}

donc, j'ai 4 principaux éléments li et leur a donné un identifiant, le "navcontainer" est le conteneur qui enveloppe la navigation directement sous "navbar-inner" . vous devez également appeler cette fonction sur le redimensionnement de la fenêtre, que cela fonctionne!

1
Ray

J'ai fini par utiliser une légère variante, je n'aimais pas l'utilisation de display:table et je voulais plutôt utiliser flexbox.

CSS:

.navbar .nav {
    margin: 0;
    display: flex;
    flex-direction: row;
    width: 85%;
}

.navbar .nav li {
    flex: 1;
}

.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    flex: 1;
}

Html:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      {% block header %}
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">MySite</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/">Home</a></li>
          <!-- <li><a href="/submit">Submit</a></li> -->
          <li><a href="/vendors">Vendors</a></li>
          <li><a href="/news">News</a></li>
          <li><a href="/about">About</a></li>
          <form class="navbar-form navbar-left" action="/action_page.php">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search">
              <div class="input-group-btn">
                <button class="btn btn-default" type="submit">
                  <i class="glyphicon glyphicon-search"></i>
                </button>
              </div>
            </div>
          </form>
        </ul>
      </div><!--/.nav-collapse -->
      {% endblock %}
    </div>
  </nav>

Résultat:  result.gif

0
Tim P