検索
ホームページウェブフロントエンドCSSチュートリアルブートストラップ ナビゲーションバー内の要素を中央に配置するにはどうすればよいですか?

How do I center an element within a Bootstrap Navbar?

ブートストラップ ナビゲーション バーで要素を中央に配置する

問題: さまざまな試みにもかかわらず、ユーザーはブートストラップ内の要素を中央に配置できませんnavbar.

答え:

Bootstrap 5 (2021)

Navbar はフレックスボックスを利用しており、mx-auto クラスを使用して要素を中央に配置できます。

<nav class="navbar navbar-expand-md 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 mx-auto">
      <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>

ブートストラップ 4.1

Bootstrap 4.1 以降の場合、左右のメニューを揃えるには、左にプルおよび右にプルする代わりに mx-auto を使用します。

<nav class="navbar navbar-expand-md 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 mx-auto">
      <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>

その他の中央揃えオプション

  • Position:Absolute;: 中央に配置する要素を Position:Absolute; に設定します。そして、transform: translationX(-50%); を使用します。
  • Flexbox ネスト: 中央に配置された項目も表示するようにします: flexbox と justify-content: center.

これらの解決策には、中央の要素がさまざまな要素の隣接する要素と完全に整列しないなどの欠点がある可能性があることを覚えておいてください。

追加の注意事項:

  • 必ず main-nav を目的の navbar クラス名に置き換えてください。
  • Navbar が単一の navbar-nav の場合は、justify-content-center を使用して中央に配置します。
  • 要素を中央に配置するにはデスクトップでは左揃えですが、モバイルでは左揃えになります。メディア クエリを使用します。
  • Navbar のカスタマイズの詳細については、[Bootstrap ドキュメント](https://getbootstrap.com/docs/4.5/components/navbar/) を参照してください。

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
さまざまなCSSボーダープロパティとは何ですか?さまざまなCSSボーダープロパティとは何ですか?Apr 28, 2025 pm 05:30 PM

この記事では、カスタマイズ、ベストプラクティス、および応答性に焦点を当てたCSSボーダープロパティについて説明します。主な議論:Border-Radiusは、レスポンシブデザインに最も効果的です。

CSS HSLの色とは何ですか?CSS HSLの色とは何ですか?Apr 28, 2025 pm 05:28 PM

記事では、CSS HSLの色、Webデザインでの使用、およびRGBよりも利点について説明します。主な焦点は、直感的な色の操作を通じて設計とアクセシビリティを向上させることです。

CSSにコメントを追加するにはどうすればよいですか?CSSにコメントを追加するにはどうすればよいですか?Apr 28, 2025 pm 05:27 PM

この記事では、CSSでのコメントの使用について説明し、シングルラインとマルチラインのコメント構文を詳述しています。コメントはコードの読みやすさ、保守性、コラボレーションを強化するが、適切に管理されていないとウェブサイトのパフォーマンスに影響を与える可能性があると主張しています。

CSSセレクターとは何ですか?CSSセレクターとは何ですか?Apr 28, 2025 pm 05:26 PM

この記事では、HTML要素のスタイリングのCSSセレクター、その種類、および使用法について説明します。 IDとクラスのセレクターを比較し、複雑なセレクターでパフォーマンスの問題に対処します。

どのタイプのCSSが最優先事項を保持していますか?どのタイプのCSSが最優先事項を保持していますか?Apr 28, 2025 pm 05:25 PM

この記事では、CSSの優先順位について説明し、特異性が最も高いインラインスタイルに焦点を当てています。 CSS競合を管理するための特異性レベル、オーバーライド方法、およびデバッグツールを説明します。

CSSの構文は何ですか?CSSの構文は何ですか?Apr 28, 2025 pm 05:23 PM

記事では、CSS構文、学習戦略、一般的な間違い、検証ツールについて説明します。主な焦点は、実践と理解を通じてCSSをマスターすることです。

いくつかの最高のCSSフレームワークを提案しますか?いくつかの最高のCSSフレームワークを提案しますか?Apr 28, 2025 pm 05:22 PM

この記事では、Bootstrap、Tailwind CSS、Foundation、Bulma、Materalize、UikitなどのトップCSSフレームワークについて説明し、機能、ユーザーフレンドリー、パフォーマンス、カスタマイズ、専門的な使用に焦点を当てています。

CSSはCSS 3とどう違うのですか?CSSはCSS 3とどう違うのですか?Apr 28, 2025 pm 05:21 PM

この記事では、CSSからCSS3への進化について説明し、アニメーションやレスポンシブデザインツールなどのCSS3の新機能と、古いブラウザーとの互換性を維持する方法について説明します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター