Bootstrap 4 Navbar

新的 Bootstrap 4 Navbar 组件比它的 Bootstrap 3.x 前身改进了。在 Bootstrap 4 中，Navbar 默认响应，并使用 flexbox 使 Navbar 内容更容易对齐。使用新的 navbar-toggleable-*类来更改 Navbar 断点也很简单。现在，Navbar 有 6 个断点大小或状态，因此你可以轻松地使用以下 Navbar 选项之一。

• Navbar 永远不会折叠到垂直移​​动视图中，并且始终是水平的。
• Navbar 始终折叠到垂直视图中，并通过汉堡包切换。
• Navbar 在 4 个响应断点中的一个处折叠为垂直视图。

基本 Bootstrap 4 Navbar

<nav class="navbar navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbar1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

从上面的代码中可以看出，navbar-header 类已从 Bootstrap 4 中删除，并且全宽度 Navbar 不再需要 container-fluid。

更改导航栏断点

navbar-toggleable-md 类使上面的 Navbar 在 992px 的中（md）断点处垂直折叠（并显示切换图标）。要将其更改为不同的断点，我们只需要将 navbar-toggleable-md 替换为其中一个断点。

• navbar-toggleable =在 xs 宽度<576px 上折叠
• navbar-toggleable-sm =在 sm 宽度<768px 上折叠
• navbar-toggleable-lg =在 lg 宽度<1200px 上折叠

Bootstrap 4 Breakpoint Navbar Demo

更改导航栏对齐方式

Flexbox 使我们能够轻松更改 Navbar 及其内容（品牌，链接，表单或文本）的对齐方式。默认的 Navbar 内容左对齐。当然还有很多其他对齐方案……

• 品牌左（默认），链接中心和右
• 品牌中心，左右链接
• 品牌离开，链接正确
• 品牌，链接和填充宽度形式输入
• 没有品牌，链接中心和权利
• 品牌离开，链接在容器内部
• 对齐的链接（填充宽度）​​居中

具有居中品牌和左/右链接的 Bootstrap 4 Navbar

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".dual-collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#features">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand d-flex mx-auto" href="#">Navbar 2</a>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

带有品牌左侧，链接中心和右侧的 Bootstrap 4 Navbar

<nav class="navbar navbar-light navbar-toggleable-sm bg-faded justify-content-center">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand d-flex w-50 mr-auto">Brand</a>
    <div class="navbar-collapse collapse" id="collapsingNavbar3">
        <ul class="navbar-nav mx-auto w-100 justify-content-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
        </ul>
    </div>
</nav>

Navbar Alignment Demos： http ： //www.codeply.com/go/qhaBrcWp3v

有关 Bootstrap 4 Navbar 的更多信息

自定义颜色，对齐或高度