web-dev-qa-db-fra.com

Bootstrap 4: Comment avoir une barre de navigation pleine largeur avec le contenu d'un conteneur (comme le SO Navbar)?

J'utilise Bootstrap 4.

Comment créer une barre de navigation comme la barre de navigation SO? 

Avec le contenu aligné comme un "conteneur" mais la largeur d'un "conteneur-fluide" dans bootstrap 4?

Je veux la largeur du paramètre de barre de navigation "sommet fixe" sans le fixer ainsi que le contenu de la barre de navigation dans un "conteneur". 

Je donnerais un exemple, mais j'essaie de créer quelque chose qui ressemble exactement à la barre de navigation en haut de cette page.

csstwitter-bootstrapresponsive-designbootstrap-4twitter-bootstrap-4
5
bbennett36

Enroulez simplement un élément autour de l'élément .container.

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

#primary-nav {
  background-color: skyblue;
}
<div id="primary-nav">

  <div class="container">
  
    <ul class="nav">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Contact</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
    </ul>    
    
  </div>
  
</div>

7
hungerstar

J'avais rencontré ce problème aussi. J'ai résolu en mettant le <nav>...</nav> en dehors du <div class='container'>...</div> ou du <div class='container-fluid'>...</div>.

2
Vandy Sodanheang

J'ai pu obtenir le menu à 100% de largeur

<ul class="navbar-nav nav-fill w-100">
  <li class="nav-item">
    <a href="#" class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Contact</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">About</a>
  </li>
</ul>

utilisation de nav-fill w-100 avec Bootstrap 4

2
Ravi Ram