Bootstrap 4: How to have a full width navbar with the content in a container (Like the SO Navbar)?

Question

I am using Bootstrap 4.

How do I make a navbar like the SO navbar?

With the content aligned like a "container" but the width of a "container-fluid" in bootstrap 4?

I want the width of the "fixed-top" navbar setting without it being fixed-top and the navbar content in a "container".

I would provide an example but I'm trying to make something exactly like the navbar at the top of this page.

Answer 1

I was able to get the menu to 100% width

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

using nav-fill w-100 with Bootstrap 4

Answer 2

Wrap an element around the .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>

Answer 3

I had met this issue also. I solved by put the <nav>...</nav> outside the <div class='container'>...</div> or <div class='container-fluid'>...</div>.