ホームページ > ウェブフロントエンド > CSSチュートリアル > Bootstrap 4 Navbar でナビゲーション項目を中央に配置するにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-12-06 20:47:13
オリジナル
275 人が閲覧しました

How to Center Navigation Items in a Bootstrap 4 Navbar?

Bootstrap でのナビゲーション項目の中央揃え

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">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">
ログイン後にコピー
ログイン後にコピー

CSS:

.navbar {
    display: flex;
    justify-content: center;
}
ログイン後にコピー

上記のコードは、フレックスボックスの表示プロパティを使用してナビゲーションバーをフレックスコンテナに設定し、justify-content を使用してナビゲーション項目を位置合わせします。中心。 Bootstrap の折りたたみクラスは、小さい画面サイズでナビゲーション項目を非表示にするために使用されます。

応答性の調整

応答性を高めるために、Bootstrap の mr-auto ユーティリティ クラスを使用して、ナビゲーション項目がブラウザのサイズに合わせて中央に正しく配置されるようになりました変更点:

<div class="collapse navbar-collapse mr-auto">
ログイン後にコピー

次のコードを考えてみましょう:

<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">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">
ログイン後にコピー
ログイン後にコピー

CSS:

@media (min-width: 768px) {
    .navbar-nav {
        justify-content: center;
    }
}
ログイン後にコピー

Thisコードは、ブラウザ ウィンドウの幅が よりも大きい場合に、それに応じて justify-content を設定するメディア クエリを追加します。 768 ピクセル、大きい画面でのみナビゲーション項目を中央に配置します。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート