左、中央、または右揃えのアイテムを備えたブートストラップNavBar


437

ではブートストラップ、右に左にロゴ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>

回答:


800

2019アップデート

ブートストラップ4

Bootstrap 4にフレックスボックスが追加されたので、Navbarの配置がはるかに簡単になりました。ここにいるための例を更新し、左中央ブートストラップ4ナビゲーションバーでは、および他の多くのアライメントシナリオはここに示されました

フレキシボックス自動マージン、および発注のユーティリティクラスは、必要に応じてナビゲーションバーコンテンツの整列に使用することができます。大画面とモバイル/折りたたみビューの両方でのナビゲーションバーアイテム(ブランド、リンク、トグラー)の順序と配置を含め、考慮すべき多くの点があります。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ナビゲーションバーオプション:

センターリンクとオーバーレイロゴ画像

<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配置シナリオ:

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

Navbarブランド左、デッドセンターリンク


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

ここに画像の説明を入力してください


その他の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(3.x


オプション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- justifiedBootstrap center navbarも参照してください。


ブートストラップの中央のナビゲーションバーブート
ストラップ4ナビゲーションバーのアイテムを右に揃えます


1
左側のアイテムを左側の別のトグルで折りたたむにはどうすればよいですか?
gepex 2016

1
bootplyが現在機能していないため、私は2つのjsfiddleサンプルを作成しました。sol 1 およびsol 2。ところで、soluzion 2はよりうまく機能します(imho)
GiuServ

Bootstrap 4の場合、Firefoxを使用すると、例1は機能しません。.absクラスを追加すると、navbar-brand要素が左右のボタンを覆い、クリックできなくなります
8bithero

1
これが回答としてマークされていないのはなぜですか?BS 3&4の3つのオプションを提供します。
Murkantilism

コードプライリンクが開いていません。そのウェブサイトで使用されている恐ろしいデザインが原因です。彼らはあらゆる種類の広告、graphQL ...を一緒に混合し、1つがロードまたはブロックに失敗した場合、画面全体が空白になります。はい、それは角度が機能する(または機能しない)方法です。
AaA

58

ブートストラップ4

navBarsアイテムを整列する方法はたくさんあります。

左揃えの場合 ここに画像の説明を入力してください

クラス= "navbar-nav mr-auto "

右揃え ここに画像の説明を入力してください

クラス= "navbar-nav ml-auto "

センターアライン用 ここに画像の説明を入力してください

クラス= "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>

1
b-nav-itemタグにclass = "navbar-brand mx-auto"を追加することで
うまくいき

36

似たようなもの(左揃え、中央揃え、右揃えのアイテム)が必要ですが、中央揃えのアイテムをアクティブとしてマークする機能が必要です。私のために働いたのは:

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

1
それはかなり近いですが、折りたたむと壊れます。あなたがそれをモバイルデバイスで見るならば、「ブランド」はメニューバーの下に現れます。ブランドは実際のナビゲーションの一部ではありませんか?
spasticninja

1
これにより、OPがより厳密に応答します。
Roger Dueck、2015年

これまでのところ、これでうまくいきました。私にはブランドも適切な要素もありません。中央に3つのオプションがあります。ありがとう
アレッサンドロ

要素の画面サイズのどれを削減しないのナビゲーションバー(共有のコード例では少なくとも)でたむろしている中で、私は、このソリューションは、最も投票の答えよりも良い仕事をしないと思う
pravin

26

ブートストラップ4(alpha 6以降)

ナビゲーションバーはフレックスボックスで構築されています!フロートの代わりに、フレックスボックスとマージンユーティリティが必要になります。

右揃えの使用のためjustify-content-endcollapsediv要素:

<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


3
私には機能しません... justify-content-endはnavに適用されているようで、navbarで機能していないようですが、最新バージョンのブートストラップです。
Stephane Paquet 2017年

1
@stephanePaquet、これはアルファ6(最新のブートストラップリリース)に適用されます-何を使用していますか?
ジェレミーリンチ

11

私の頭をたたいて、私の答えをもう一度読んで、OPが中央のメニューで、左側に1つ、右側に2つのロゴを要求していることを認識しました。

これは、ロゴにBootstrapの「navbar-right」と「navbar-left」を使用し、ULに「navbar-nav」の代わりに「nav-justified」を使用することにより、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


ここに「ブランド」を集中させようとここに来た人のための私の古い答えは次のとおりです。

私はこのスレッドが少し古いことを知っていますが、これに取り組むときに私の発見を投稿するだけです。tomaszbakがcollaspeで休憩してから、私はソリューションをskellyの回答に基づいて決定することにしました。最初に「navbar-center」を作成し、CSSで通常のnavbarのフロートをオフにしました。

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

したがって、lgビューポートとmdビューポートのブランドは左右にリンクされた中央に配置されます。smビューポートに到達したら、リンクが次の行にドロップして、ブランドと重複しないようにし、最後にxsに移動しますcollaspeのビューポートが起動し、トグルを使用できるようになります。これをさらに一歩進めて、navbar-rightとnavbar-leftのメディアクエリを変更して、navbar-brandで使用すると、smビューポートでリンクがすべて中央に配置されますが、吟味する時間がなくなります。

ここで私の古いbootplyを確認できます:www.bootply.com/n3PXXropP3

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


1

左、中央、右のアイテムの内容に応じて、次の方が良い解決策であることがわかりました。マージンのない100%の幅はdivのオーバーラップを引き起こし、アンカータグが正しく機能しませんでした。つまり、乱雑なzインデックスの使用がありません。

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

1

これは日付の付いた質問ですが、ブートストラップの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では修正されないものとしてリストされています。


1
<div class="d-flex justify-content-start">hello</div>    
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>

中央に配置するフィールドを、上記の分割に従って右または左に配置します。


1

右に移動するセクションで、左マージンをauto-> ml-autoに設定します。

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </div>
</div>


-2

最も簡単な解決策:

navbarを列に分割するだけです。たとえば、全体で24列ある場合、12は空になり、12はナビゲーションバーを制約します。

<nav class="navbar navbar-default">
    <div class="row">
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>

       <div class="col-sm-12">
           <ul class="nav navbar-nav" align="center">
              <li><a href="#">Home</a></li>
              <li><a href="#">First Link</a></li>
              <li><a href="#">Second Link</a></li>
              <li><a href="#">Third Link</a></li>
              <li><a href="#">Fourth Link</a></li>
           </ul>
       </div>
    </div>
</nav>

1
グリッドの行と列は、Navbar内では使用しないでください。サポートされているコンテンツを使用してください。
ジム

@Zimどうしてそんなに悪いの?
パーサー
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.