wake-up-neo.com

Bootstrap 4: Wie man eine Navbar mit voller Breite mit dem Inhalt in einem Container hat (wie der SO Navbar)?

Ich benutze Bootstrap 4.

Wie erstelle ich eine Navbar wie die SO Navbar? 

Ist der Inhalt wie ein "Container" ausgerichtet, aber die Breite eines "Containerfluids" in Bootstrap 4?

Ich möchte, dass die Breite der Navbar-Einstellung "Fixed-Top" ohne "Fixed-Top" und der Navbar-Inhalt in einem "Container" steht. 

Ich würde ein Beispiel geben, aber ich versuche, genau wie die Navigationsleiste oben auf dieser Seite etwas zu machen.

5
bbennett36

Wickeln Sie einfach ein Element um das .container-Element.

@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

Ich hatte dieses Problem auch getroffen. Ich habe das Problem gelöst, indem Sie den <nav>...</nav> außerhalb des <div class='container'>...</div> oder <div class='container-fluid'>...</div> legen.

2

Ich konnte das Menü auf 100% Breite bringen

<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>

verwenden von nav-fill w-100 mit Bootstrap 4

2
Ravi Ram