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