Bootstrap 4 Navbar でナビゲーションリンクを正確に中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-21 12:06:10

オリジナル

668 人が閲覧しました

How to Precisely Center Navigation Links in a 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 サイトの他の関連記事を参照してください。