ブートストラップ ナビゲーションバーの要素を中央に配置するにはどうすればよいですか?

Bootstrap のナビゲーションバーで要素を中央に配置する

Bootstrap のナビゲーションバー内で要素を中央に配置するのに苦労していますか?さまざまな試みにもかかわらず、この一見単純なタスクを達成するのは難しいことが判明する可能性があります。この記事では、この問題を詳しく掘り下げ、実用的な解決策を提供します。

ナビゲーションバーのセンタリングについて

4.1 より前の Bootstrap バージョンでは、ナビゲーションバー内の要素のセンタリングはフロートとマージンに依存していました。 、これを効果的に実装するのは難しい可能性があります。ただし、フレックスボックスの導入により、物事はよりシンプルになりました。

Bootstrap 4.1 以降のソリューション

Bootstrap 4.1 では、justify-content-center プロパティが導入されました。要素内で要素を中央に配置する簡単かつ効果的な方法navbar:

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Download</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
        </ul>
        <ul class="nav navbar-nav justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#">Rates</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>

絶対配置の代替

絶対配置が許容される場合は、navbar 内の要素を中央に配置するために使用することもできます:

<div class="navbar-center-absolute">
    <!-- Centered element here -->
</div>

.navbar-center-absolute {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

フレックスボックスのネスト代替

最後に、もう 1 つのフレックスボックス ベースのアプローチは、ナビゲーション バー内の中央に項目をネストすることです。

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav flex-fill w-100 d-flex flex-nowrap">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Download</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item"><a class="nav-link" href="#">Rates</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>

これらのソリューションは、ブートストラップ ナビゲーション バー内の要素を中央に配置する効果的な方法を提供します。ウェブサイトのナビゲーションがよりユーザーフレンドリーで視覚的に魅力的になります。

以上がブートストラップ ナビゲーションバーの要素を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。