2 行の Bootstrap 4 Navbar を作成するには?

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

2 行の Bootstrap 4 ナビゲーションバーのセットアップは簡単で、さまざまなアレンジが可能です。ウェブページ。これを実現するには、navbar-collapse div で flexbox ユーティリティ クラス flex-column を利用し、子要素が垂直方向に整列するようにします。

1. flex-column クラスを追加します。

   navbar-collapse div を flex-column クラスでラップして、次のことを実現します。垂直方向の配置。

   <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3">

2. オプションの配置とパディング:

   必要に応じて、追加の配置とパディングを追加して、見た目を改善します。たとえば、テキストを右揃えにしてソーシャル メディア アイコンに垂直方向のパディングを追加するには:

   <ul class="navbar-nav flex-row mb-2">
       <li class="nav-item">
           <a class="nav-link py-1 pr-3" href="#">
               <i class="fa fa-facebook"></i>
           </a>
       </li>
       ...
   </ul>

3. 追加のバリエーション:

   右側に 2 行のナビゲーションバーや右揃えの検索など、別のレイアウトを試してください。 form.

デモとコード:

これは、2 つのナビゲーションバーのデモと対応するコードです。行:

• [デモ](https://jsfiddle.net/lot99)
• [コード](https:// codepen.io/anon/pen/VEPqpe?editors=1010)
  

注:

Bootstrap 4.0.0 以降では、互換性のために提供されたリンクに従って更新されたコードを使用してください。

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