Bootstrap 4のブラウザウィンドウサイズに応じて、ナビゲーションアイテム(リンク)をナビゲーションバーの中央に配置したい場合はどうなりますか?コードを見てください。
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<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="#">Disabled</a>
</div>
</div>
</nav>
次に、ブラウザの幅に応じてdiv「navbar-nav」を中央に配置します。私が試したことの1つは、mr-autoとml-autoを指定することです。これは、中央に配置されているように見えますが、正確ではありません。実際に行うことは、幅「ブラウザウィンドウの幅-ロゴの幅」に従って中央に配置します。画面の真ん中に正確に配置したい。
位置を絶対に変更しようとしましたが、折りたたまれたモードでもそのようなレイアウトが台無しになります。
フレックスボックスとマージンユーティリティをレスポンシブに使用します...
Bootstrap 4 alpha 6 http://codeply.com/go/YvzHvQQRAs(センターブランドとリンク)
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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="d-md-flex d-block flex-row mx-md-auto mx-0">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
<div class="navbar-nav">
<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="#">Disabled</a>
</div>
</div>
</div>
</nav>
Bootstrap 4.1 https://www.codeply.com/go/sTJUthyswN(中央のブランド、モバイルで左揃え)
編集..
答えは基本的に同じです。mx-auto
中央に使用します。
http://codeply.com/go/mycC5z8lpJ(中央のリンク、ブランド左)
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
リンクをビューポートの中央に正確に配置する場合は、次の2番目の例を参照してください:http://www.codeply.com/go/RCBftzZCD8
こちらもご覧ください...
Bootstrap 4 Navbarで要素を
中央に配置するブランドがBootstrap4で要素を右にプッシュせずに、Navbarリンクを中央に配置しますか?
Flexboxを使用してBootstrap4でナビゲーションバーを中央に配置する
方法Bootstrap4でナビゲーションバーのコンテンツを配置する方法
Bootstrap4ナビゲーションバーはロゴの中央に配置し、左側のアイコンを切り替えます
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加