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>
***2019年最新情報
Bootstrap 4にフレックスボックスが追加されたので、ナビバーの配置がとても簡単になりました。Bootstrap 4のNavbarにおけるleft, right, centerの更新例](http://www.codeply.com/go/qhaBrcWp3v)と、[**その他多くの整列シナリオ**のデモ](https://www.codeply.com/go/kTGlK9Axdk)です。
flexbox](http://getbootstrap.com/docs/4.1/utilities/flex/)、 auto-margins、 orderingユーティリティ・クラスは、必要に応じてナバー・コンテンツの整列に使用できます。大スクリーンとモバイル/折りたたみビューの両方におけるナバーアイテム(ブランド、リンク、トグラー)の順序と整列を含め、考慮すべきことがたくさんあります。**グリッド・クラス(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
<br>;
もう一つの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>
<br>;
または、他のBootstrap 4のアライメントシナリオ:
ブランド左、死んだ中央リンク、(空の右)<br>;
<hr>;
ブランドとリンクは中央、アイコンは左右<br>;
<hr>;
その他のBootstrap 4の例:
モバイルではトグラー左、ブランドは右<br>; モバイルではブランドとリンクを中央に配置<br>; デスクトップではリンクを右寄せ、モバイルではリンクを中央寄せ<br>; 左リンク&トグラー、中央ブランド、右検索<br>;
<hr>;
https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-item-to-the-right<br/>; https://stackoverflow.com/questions/51852374/bootstrap-4-navbar-right-align-with-button-that-doesnt-collapse-on-mobile<br/>; https://stackoverflow.com/questions/33867603/center-an-element-in-bootstrap-4-navbar
<hr>;
オプション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;
}
<hr>;
オプション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
**その他の例
左ブランド、中央リンク<br>; 左トグラー、中央ブランド<br>;
3.xについては、nav-justified: https://stackoverflow.com/questions/21453781/bootstrap-center-navbar/21459341#21459341 も参照してください。
<hr>;
https://stackoverflow.com/questions/39945599/center-navbar-in-bootstrap/42736011#42736011
https://stackoverflow.com/questions/41513463/<br>;
同じようなもの(左揃え、中央揃え、右揃えアイテム)が必要でしたが、中央揃えのアイテムをアクティブとしてマークする機能が必要でした。私の場合は
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;
}
}
ブートストラップ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>
Navbarはフレックスボックスで構築されています。! フロートの代わりに、フレックスボックスとマージンユーティリティが必要です。
[右揃え]の場合は、 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?出力。
頭を軽くたたいて、答えをもう一度読んで、OPが中央のメニューではなく、右側の左側に2つのロゴのロゴを要求していることに気付きました。
これは、Bootstrap'を使用してHTMLで厳密に実行できます。;s"。;navbar-right"。; と"。;navbar-left"。; ロゴ、そして"。;nav-justified"。; "の代わりに。;navbar-nav"。; あなたのULのために。追加の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>
ブートプリー:http://www.bootply.com/W6uB8YfKxm。
------------------------------------------------- -------------------------------。
ここに来て「ブランド」を中心としようとしている人のために、ここに私の古い答えがあります。
このスレッドは少し古いことは知っていますが、これに取り組むときに調査結果を投稿するだけです。 tomaszbakがcollaspeで休憩して以来、スケリーの答えに基づいて解決策を決定しました。 最初に「navbar-center」を作成し、CSSの通常のnavbarのfloatをオフにしました。
.navbar-center
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar-brand{
float:none;
}
ただし、skelly'の問題。;s答えは、あなたが本当に長いブランド名を持っている場合です。 (または、ブランドに画像を使用したかった。) 次に、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>
< / nav>。
したがって、lgとmdのビューポートでは、ブランドが左右にリンクされています。, smビューポートに到達すると、リンクは次の行にドロップし、'にドロップします。;あなたのブランドと重複しています。, そして最後に、xsビューポートでコラスペが入り、トグルを使用できます。 これをさらに一歩進めて、navbar-brandで使用するときにnavbar-rightとnavbar-leftのメディアクエリを変更して、smビューポートでリンクがすべて中央に配置されるようにしますが、精査する時間がありませんでした。
私の古いブートプライはwww.bootply.com/n3PXXropP3で確認できます。
3つのブランドを持つことは「z」と同じくらい面倒かもしれませんが、レスポンシブデザインの世界では、このソリューションが私のスタイルによりよく適合しているように感じます。
これは日付の付いた質問ですが、ブートストラップのgithubページから共有する別のソリューションを見つけました。 ドキュメントは更新されておらず、SOに関する他の質問があり、少し異なる質問ではありますが、同じ解決策を求めています。 このソリューションはケースに固有のものではありませんが、ご覧のとおり、ソリューションは < nav class = "navbar navbar-default navbar-fixed-top"の直後の
< div class = "container"> ですが、必要に応じて
< 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では修正されないとしてリストされています。
< div class = "d-flex asjustice-content-start"> hello< / div> .
< div class = "d-flex asjustice-content-end"> hello< / div> .
< div class = "d-flex asjustice-content-center"> hello< / div> .
< div class = "d-flex asjustice-content-between"> hello< / div> .
< div class = "d-flex asjustice-content-around"> hello< / div> .
``。
上の区分に従って、中央、右、または左に配置するフィールドを配置します。
最も単純なソリューション:
navbar
を列に分割するだけです。たとえば、全体に24列がある場合、12は空になり、12はnavbarを制約します。
<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>