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">

2 つ追加Rows

navbar に 2 つの行を追加するには、navbar-collapse div で flex-column クラスを使用します。これにより、navbar-collapse div の子要素が垂直方向にスタックされます。

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

ナビゲーション リンクの追加

2 つの行ができたので、それらにナビゲーション リンクを追加できます。各行に 1 つずつ、2 つの UL 要素を作成します。

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

結果

次に、2 つの行を含む結果のナビゲーションバーを示します。

  Navbar
  
    
  

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

以上がBootstrap 4 を使用して 2 行の Navbar を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。