Bootstrap 4 Navbar でナビゲーション リンクを正確に中央に配置するにはどうすればよいですか?

Bootstrap でナビゲーション項目を中央に配置する

Bootstrap 4 のナビゲーション バー内のナビゲーション リンクをブラウザ ウィンドウのサイズに応じて中央に配置するタスクには、共通の課題であることが証明されています。 ml-auto と mr-auto を使用した単純なソリューションはそれに近いかもしれませんが、正確なセンタリングは実現できません。

これに対処するために、フレックスボックスとマージン ユーティリティを応答的に利用する包括的なアプローチを提供します。

Bootstrap 4 Alpha 6 以降

Bootstrap バージョン 4 アルファ6 以降では、次のコードはブランドとリンクのセンタリングの両方を提供します。

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

Bootstrap 4.1

Bootstrap 4.1 以降では、センタリング戦略は同じままです。リンクを整列させ、モバイルでブランドを左側に配置する例を次に示します。

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

ビューポート内でリンクを正確にセンタリング

ビューポート内で正確なリンクをセンタリングする必要がある場合ビューポートの場合は、このアプローチを試してください:

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

その他の例については、提供されているリンクを参照してください。 Bootstrap 4 のナビゲーションバーの配置。

以上がBootstrap 4 Navbar でナビゲーション リンクを正確に中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。