レスポンシブなブートストラップ ナビゲーションバーでコンテンツを中央に配置するにはどうすればよいですか?

レスポンシブなブートストラップ ナビゲーション バーでコンテンツを中央に配置する方法

ブートストラップ ナビゲーション バーでコンテンツを配置するのに苦労していますか?ここでは、多くのユーザーにとって確実に機能する包括的なソリューションを紹介します。

問題の理解

Bootstrap のデフォルトのナビゲーションバーの配置は、特にレスポンシブ レイアウトをターゲットとする場合に問題が発生する可能性があります。多くの場合、原因は内部ナビゲーションに関連付けられた float: left プロパティです。

解決策

コンテンツを中央に配置するには、float: left を削除する必要があります。内側のナビゲーションをインラインブロックにします。さらに、text-align プロパティを center に設定すると、コンテンツが水平方向に配置されます。

CSS の変更

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

例

これらの CSS 変更を実装すると、コンテンツが中央に配置されます。 navbar.

<!-- ...navbar code here -->

<style>
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }
</style>

<!-- ...navbar code here -->

その他の考慮事項

位置合わせの変更が折りたたまれていないナビゲーションバーに対してのみ発生するようにするには、CSS の変更を適切なメディア クエリ内に含めることを検討してください。

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }
}

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