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

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

ブートストラップ ナビゲーション バーでコンテンツを中央に配置することは、特に一般的に提案されている場合にイライラする作業になることがあります。解決策は失敗します。この記事では、この問題を解決する簡単で効果的な方法を説明します。

ナビゲーションバーの HTML 構造は標準のように表示されます。ただし、CSS スタイルは少しずれています。ブートストラップは、デフォルトでナビゲーションバーのコンテンツを左に揃えます。中央に配置するには、次の手順に従います。

1. フロートを削除します: left from .navbar .navbar-nav: この変更により、内部ナビゲーションから左揃えが削除されます。
2. .navbar .navbar-nav を表示するように設定します。 inline-block: これにより、ナビゲーション リンクがインライン要素に変換されます。
3. テキストを .navbar の中央に配置します。 .navbar-collapse: このステップでは、ナビゲーションが折りたたまれたときにコンテンツを中央に配置します。

更新情報はこちらCSS:

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

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

このソリューションでは、すべての画面サイズでコンテンツを中央に配置する必要があります。ただし、ナビゲーションバーが折りたたまれていない場合にのみこの効果が必要な場合は、メディア クエリを使用できます:

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

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

これにより、画面幅が 768 ピクセル以上の場合にのみセンタリング効果が適用されます。デザインの必要に応じてブレークポイントを調整します。

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