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

Question

我正在使用 Bootstrap 4。

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

在 bootstrap 4 中，内容像“容器”一样对齐，但宽度与“容器流体”一致？

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

我会提供一个示例，但我正在尝试制作与本页顶部的导航栏完全一样的东西。

Answer 1

我能够将菜单设置为 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 中使用 nav-fill w-100