Bootstrap 4：如何在容器中拥有一个包含内容的全宽导航栏（如 SO Navbar）？

Question

我正在使用引导程序 4。

如何制作像 SO navbar 这样的导航栏？

内容像“容器”一样对齐，但引导程序 4 中的“容器流体”的宽度？

我想要“固定顶部”导航栏设置的宽度，而不是固定顶部和“容器”中的导航栏内容。

我将提供一个示例，但我正在尝试制作与此页面顶部的导航栏完全相同的内容。

原文由 bbennett36 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 hungerstar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我能够将菜单设置为 100% 宽度

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

在 Bootstrap 4 中使用 导航填充 w-100

原文由 Ravi Ram 发布，翻译遵循 CC BY-SA 4.0 许可协议