左、中央、または右揃えの項目を持つブートストラップNavBar

Question

Bootstrap では、左側にロゴ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>

Answer 1

2019 Update

ブートストラップ4

Bootstrap 4にflexboxが追加されたため、Navbarの調整がはるかに簡単になりました。 left、rightの 更新例を次に示しますおよびcenterBootstrap 4 Navbar 、および 他の多くのアライメントシナリオはここ で実証されています.

flexbox 、 auto-margins 、および ordering ユーティリティクラスを使用して、Navbarを調整できます。必要に応じてコンテンツ。大画面とモバイル/折りたたみビューの両方でのNavbarアイテム（ブランド、リンク、トグル）の順序と配置など、考慮すべき事項がたくさんあります。 Navbarにはグリッドクラス（row、col）を使用しないでください。

ここに様々な例があります...

左、中央（ブランド）および右リンク：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</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>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

http://www.codeply.com/go/qhaBrcWp3v

中央リンクとオーバーレイロゴ画像 を含む別のBS4 Navbarオプション：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">
            <img src="//placehold.it/120/ccff00" class="rounded-circle">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

または、これらの他のBootstrap 4つの調整シナリオ：

ブランド左、デッドセンターリンク、（空の右）

---

ブランドとリンクセンター、左右のアイコン

---

その他のBootstrap 4つの例：

モバイルでトグル左、ブランド右
センターブランドとモバイルのリンク
デスクトップのリンクを右揃え、モバイルの中央リンク
左リンクとトグル、中央ブランド、右検索

---

次も参照してください： Bootstrap 4はnavbarアイテムを右に揃えます
Bootstrap 4 navbarは、モバイルで折りたたまないボタンと右揃え
Bootstrap 4 Navbar の要素を中央に配置

---

ブートストラップ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

---

Bootstrapの中央ナビゲーションバー
ブートストラップ4はnavbar項目を右に揃えます

Answer 2

類似したもの（左、中央、右揃えの項目）が必要でしたが、中央の項目をアクティブとしてマークする機能があります。私にとってうまくいったのは、

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

Answer 3

ブートストラップ4（アルファ6以降）

Navbarsはflexboxで作られています！フロートの代わりに、あなたはflexboxとマージンユーティリティを必要とするでしょう。

右寄せの場合は、collapse divにjustify-content-endを使用します。

<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

Answer 4

頭を軽くして、答えをもう一度読み、OPが中央のメニューで2つのロゴのうちの1つを右に、もう1つの方法ではないと尋ねていることに気づいた。

これはHTMLで厳密に達成でき、ロゴにはBootstrapの "navbar-right"と "navbar-left"を使用し、ULには "navbar-nav"の代わりに "nav-justified"を使用します。追加のCSSは必要ありません（nsbar-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

---

ここに来て「ブランド」を中心にしようとしている人のためにここに私の古い答えです：

私はこのスレッドが少し古くなっているのを知っています、しかしこれに取り組むとき私の発見を投稿するためだけに。 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ポジショニングを使用していても、心配する必要はない）とのことだ。

そこで私がしたのは、ブートストラップ レスポンシブユーティリティ を使用して複数のバージョンのブランドブロックを作成することでした。

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

そのため、lmビューポートとmdビューポートのブランドは、左右のリンクが中心になります。smビューポートに移動すると、リンクは次の行に移動し、ブランドと重複しないようになります。 collaspeを表示すると、トグルを使用できます。これをさらに一歩進めて、navbar-brandで使用するときにnavbar-rightおよびnavbar-leftのメディアクエリを変更して、smビューポートでリンクがすべて中央に配置されるようにしても、それを確認する時間がないようにできます。

あなたはここで私の古いbootplyをチェックすることができます：www.bootply.com/n3PXXropP3

私は3つのブランドを持つことが "z"と同じくらい面倒かもしれないと思いますが、私はレスポンシブデザインの世界でこのソリューションが私のスタイルによりよく合っているように感じます。

Answer 5

ブートストラップ4

ナビゲーションバーの項目を揃えるには多くの方法があります。

For Left Align class = "navbar-nav mr-auto"

右寄せ class = "navbar-nav ml-auto"

中心揃え class = "navbar-nav mx-auto"

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>

Answer 6

これは時代遅れの質問ですが、私はブートストラップgithubページから共有するための代替ソリューションを見つけました。ドキュメンテーションは更新されておらず、わずかに異なる質問ではあるが同じ解決策を求めることについての他の質問がSOにあります。この解決策はあなたのケースに固有のものではありませんが、解決策は<div class="container">の直後の<nav class="navbar navbar-default navbar-fixed-top">ですが、必要に応じて<div class="container-fluid"に置き換えることもできます。

<!DOCTYPE html>
<html>

<head>
  <title>Navbar right padding broken </title>
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#/" class="navbar-brand">Hello</a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav navbar-right">
          <li>
            <div class="btn-group navbar-btn" role="group" aria-label="...">
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

このページのフィドルに解決策が見つかりました。 https://github.com/twbs/bootstrap/issues/18362

v3では修正されない予定です。

Answer 7

左、中央、右の項目の内容に応じて、以下のほうが良い解決策であることがわかりました。マージンのない100％の幅はdivのオーバーラップを引き起こし、アンカータグが正しく機能するのを妨げていました - それはzインデックスの面倒な使用なしにです。

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}

Answer 8

このアプローチは私のために働いた：

.navbar,
.navbar-collapse {
    padding-right: 10%;
    padding-left: 10%;
}

.navbar-header{
    padding-left: 10%;
}