Bootstrap ナビゲーションバー内で要素を中央に配置するにはどうすればよいですか?

ブートストラップ ナビゲーションバーの要素を中央揃えにする

コンポーネントが柔軟に配置される方法により、ブートストラップ ナビゲーションバーの要素を中央揃えにするのは難しい場合があります。ただし、これを達成するための効果的な方法は次のとおりです。

Bootstrap 5 (2021)

Navbar は依然としてフレックスボックスを採用しているため、位置合わせの原則は Bootstrap 4 と同様のままです。 mx-auto を使用して「Web サイト名」を中央に配置できます。左側と右側のサイド メニューをフローティングする必要はなくなりました。

コード例:

<nav>

Bootstrap 4.1

Navbar はフレックスボックスを活用し、次を使用してセンタリングできるようになりました。 mx-auto。左側と右側のメニューではフロートを使用する必要がなくなりました。

コード例:

<nav>

Bootstrap 4 Beta

Navbar に 1 つの navbar-nav しかない場合は、次のようにすることもできます。 justify-content-center を使用して、コンテンツを整列させます。

絶対位置によるナビゲーションバーの中央揃え

を使用すると、中央に配置したい要素を絶対位置に配置できます。 :

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

フレックスボックスによるナビゲーションバーの中央揃えネスト

もう 1 つのオプションは、フレックスボックスを使用して項目を中央に配置することです:

<ul>

注: 上記の解決策は、左側を基準にして「Web サイト名」を中央に配置します。そして右のナビゲーションバーとナビゲーション。 flex-fill クラスを追加すると、各セクションが Navbar の幅を埋めるようになり、隣接するセクションの幅が異なる場合に位置がずれるのを防ぎます。

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