Bagaimana untuk Mencipta Navbar Bootstrap 4 Dua Baris dengan Menu Susun Menegak?

Mencipta Bootstrap 4 Navbar dengan Dua Baris

The Challenge

Dalam Bootstrap 4, pengguna sering menghadapi cabaran untuk menstrukturkan navbar dengan ciri tersendiri susunan: jenama/ikon yang menonjol di sebelah kiri dan dua menu navbar-nav dijajarkan secara menegak di sebelah kanan. Objektifnya adalah untuk mencapai reka letak di mana kedua-dua menu menduduki baris berasingan di sebelah kanan ikon.

Penyelesaian: Menggunakan Flexbox

Untuk menjajarkan menu secara menegak, kami boleh memanfaatkan kotak flex-column kelas utiliti pada div navbar-collapse. Ini menetapkan lajur flex-direction: untuk elemen anak div, memastikan ia disusun secara menegak.

<div>

Pertimbangan Tambahan

Untuk penyesuaian dan penjajaran yang dipertingkat, pertimbangkan petua berikut:

• Melaraskan Saiz Ikon: Jika ikon terlalu besar atau kecil, gunakan saiz fon untuk melaraskan saiznya.
• Mencipta Ruang Antara Menu: Tambahkan beberapa ruang menegak antara menu menggunakan margin-atas pada navbar-nav kedua.
• Menjajarkan Menu ke Kanan: Gunakan margin-kiri: auto pada kelas navbar-nav untuk menjajarkannya di sebelah kanan ikon.

Dengan pelarasan ini, anda boleh mencipta bar navigasi Bootstrap 4 dengan dua menu disusun secara menegak, seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Navbar Bootstrap 4 Dua Baris dengan Menu Susun Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!