垂直に積み上げられたメニューを備えた 2 行の Bootstrap 4 Navbar を作成するにはどうすればよいですか?

2 行の Bootstrap 4 Navbar の作成

課題

Bootstrap 4 では、ユーザーは、多くの場合、異なる行を持つ Navbar を構築するという課題に遭遇します。配置: 左側に目立つブランド/アイコン、上部に縦に並んだ 2 つのナビゲーションバーとナビゲーション メニュー 右。目的は、両方のメニューがアイコンの右側の別々の行を占めるレイアウトを実現することです。

解決策: フレックスボックスの利用

メニューを垂直方向に整列させるには、フレックス列フレックスボックスを利用できます。 navbar-collapse div のユーティリティ クラス。これにより、div の子要素の flex-direction: 列が設定され、垂直方向にスタックされるようになります。

<div>

その他の考慮事項

カスタマイズと配置を強化するには、次のヒントを考慮してください。

• アイコン サイズの調整: アイコンが大きすぎる、または小さすぎる場合は、次を使用します。 font-size を使用してサイズを調整します。
• メニュー間のスペースの作成: 2 番目の navbar-nav の margin-top を使用して、メニュー間に垂直方向のスペースを追加します。
• メニューを右に揃える: navbar-nav クラスで margin-left: auto を使用してメニューを右に揃えます。 icon.

これらの調整により、必要に応じて 2 つの垂直方向に積み重ねられたメニューを備えた Bootstrap 4 ナビゲーションバーを作成できます。

以上が垂直に積み上げられたメニューを備えた 2 行の Bootstrap 4 Navbar を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。