Bootstrap NavBar 具有左，中，右對齊的專案

問題描述

在 Bootstrap 中，最新的 platform-friendly 方法是建立一個導航欄，左側有徽標 A，中間的選單項和右側的徽標 B？

這是我迄今為止所嘗試的，最終對齊，以便徽標 A 位於左側，左側徽標旁邊的選單項和右側的徽標 B 。

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>

最佳解決方案

引導 3

選項 1 – 品牌中心，左/右導航連結：

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

http://bootply.com/98314

選項 2 – 左，中，右導航連結：

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-center">
        <li><a href="#">Center</a></li>
        <li><a href="#">Center</a></li>
      <li><a href="#">Center</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right</a></li>
    </ul>
  </div>
</nav>

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

http://www.bootply.com/SGYC6BWeBK

選項 3 – 中心品牌和連結

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://www.codeply.com/go/1lrdvNH9GI

對於 3.x 還可以看到 nav-justified：Bootstrap center navbar

2017 更新

Bootstrap 4

現在 BS 4 有 flexbox，比較容易一些。這裡是 updated examples for left, right and center in the Bootstrap 4 Navbar 。閱讀 Bootstrap 4 Navbar 上的檔案

次佳解決方案

我需要類似的東西 (左，中，右對齊的專案)，但能夠將居中的專案標記為活動。對我有用的是：

http://www.bootply.com/CSI2KcCoEM

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-left"><a href="#">Left 1</a></li>
      <li class="navbar-left"><a href="#">Left 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center 2</a></li>
      <li><a href="#">Center 3</a></li>
      <li class="navbar-right"><a href="#">Right 1</a></li>
      <li class="navbar-right"><a href="#">Right 2</a></li>
    </ul>
  </div>
</nav>

CSS：

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}

第三種解決方案

打掃我的頭，只是重讀了我的答案，並意識到 OP 是要求兩個標誌的左邊一個在右邊的中央選單，而不是相反的方式。

這可以透過使用 Bootstrap 的”navbar-right” 和”navbar-left” 作為徽標，然後使用”nav-justified” 而不是用於 UL 的”navbar-nav” 來嚴格執行 HTML 。不需要附加的 CSS(除非你想將 navbar-collapse 切換到 xs 視口的中心位置，那麼你需要重寫一些，但是會讓你離開) 。

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  </div>
  <div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  <div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">home</a></li>
        <li><a href="#about">about</a></li>
    </ul>
  </div>
</nav>

Bootply：http://www.bootply.com/W6uB8YfKxm

對於那些想到這裡的人來說，”brand” 在這裡是我的老答案：

我知道這個執行緒有點老了，但是隻是在這個工作時釋出我的發現。自從 tomaszbak 在 collaspe 的休息之後，我決定將我的解決方案作為 skelly 的答案。首先我建立了我的”navbar-center”，並關閉了我的 CSS 中的普通導航欄的浮點數：

.navbar-center
{
   position: absolute;
   width: 100%;
   left: 0;
   text-align: center;
   margin: auto;
}

.navbar-brand{
   float:none;
}

然而，Skelly 的答案是，如果你有一個很長的品牌名稱 (或者你想為自己的品牌使用一個影像)，那麼一旦你進入了 sm 的視口，由於絕對的位置和評論者有說，一旦你到達 xs 視口，切換開關就會斷開 (除非你使用 Z 定位，但我真的不想擔心) 。

所以我做的是利用引導 responsive utilities 建立品牌塊的多個版本：

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-left">
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
  </ul>
</div>

所以現在，lg 和 md 視口的品牌以左邊和右邊的連結為中心，一旦你到達 sm 的視口，你的連結就會放到下一行，這樣你就不會與你的品牌重疊，最後在 xs 檢視 collaspe 踢入，您可以使用切換。您可以進一步瞭解並修改 navbar-right 和 navbar-left 與 navbar-brand 一起使用的媒體查詢，以便在 sm 視口中連結都居中，但沒有時間進行檢驗。

您可以在這裡檢查我的舊主機板：www.bootply.com/n3PXXropP3

我想有 3 個品牌可能和”z” 一樣麻煩，但是我覺得在響應式設計的這個世界裡，這個解決方案更適合我的風格。

第四種方案

Bootstrap 4(從 alpha 6 開始)

Navbars are built with flexbox! Instead of floats, you』ll need flexbox and margin utilities.

對於正確使用 justify-content-end 在 collapse div 上：

<div class="collapse navbar-collapse justify-content-end">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
  </ul>
</div>

完整的例子在這裡：https://jsbin.com/kemawa/edit?output

參考文獻

Bootstrap NavBar with left, center and right aligned items

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

Bootstrap NavBar 具有左，中，右對齊的專案