Bootstrap 4 を使用して 2 行の Navbar を作成するにはどうすればよいですか?

2 行の Bootstrap 4 ナビゲーションバー

この Bootstrap 4 チュートリアルでは、2 行のナビゲーションバーを作成する方法を示します。これは、多くのナビゲーション オプションがある Web サイトや、さまざまな種類のナビゲーションを分離したい Web サイトによくあるデザイン パターンです。

前提条件

この手順に従うには、次のものが必要です。

• HTML と CSS の基本的な理解
• Bootstrap 4 がインストールされているsystem

ナビゲーションバーの作成

1. まず、新しい HTML ファイルを作成します。
2. 次のコードをファイルに追加して、基本的なナビゲーションバー構造を作成します。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse">
<h3 id="つ追加Rows">2 つ追加Rows</h3>
<p>navbar に 2 つの行を追加するには、navbar-collapse div で flex-column クラスを使用します。これにより、navbar-collapse div の子要素が垂直方向にスタックされます。</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="ナビゲーション-リンクの追加">ナビゲーション リンクの追加</h3>
<p>2 つの行ができたので、それらにナビゲーション リンクを追加できます。各行に 1 つずつ、2 つの UL 要素を作成します。</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="結果">結果</h3>
<p>次に、2 つの行を含む結果のナビゲーションバーを示します。</p>
<pre class="brush:php;toolbar:false"><nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse flex-column"></div></nav>