2021 アップデート
ブートストラップ 5 (ベータ)
Bootstrap 5 にはフレックスボックス Navbar もあり、新しい RTL サポートが導入されています。このため、「左」と「右」の概念は「開始」と「終了」に置き換えられました。そのため、Bootstrap 5 ベータ版ではマージン ユーティリティが次のように変更されました。
ml-auto=>ms-automr-auto=>me-auto
data-toggleまた、とdata-targetも変更されていることに注意してください。
data-toggle=>data-bs-toggledata-target=>data-bs-target
Bootstrap 5 の Navbar デモ
ブートストラップ 4
Bootstrap 4 に flexbox が追加されたので、Navbar の配置がはるかに簡単になりました。ここでは、Bootstrap 4 Navbar の左、右、中央の更新された例と、ここで示されている他の多くの配置シナリオを示します。
flexbox 、auto- margins 、および順序付けユーティリティ クラスを使用して、必要に応じて 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://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 right をモバイルで折りたたまれないボタン
に配置 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://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://codeply.com/go/1lrdvNH9GI
その他の例:
左ブランド、中央リンク
左トグル、中央ブランド
3.x については、nav-justified: Bootstrap center navbarも参照してください。
Bootstrap
Bootstrap 4 で Navbar を中央揃え Navbar 項目を右に揃える