Bagaimana untuk Mencipta Navbar Bootstrap 4 Dua Baris?

Mencipta Bootstrap 4 Navbar dengan Dua Baris

Menyediakan Bootstrap 4 navbar dengan dua baris adalah mudah, membenarkan susunan serba boleh pada anda laman web. Untuk mencapai matlamat ini, gunakan lajur-flex kelas utiliti flexbox pada div-runtuh navbar, memastikan elemen anak dijajarkan secara menegak.

1. Tambah Kelas-lajur flex:

   Balut div-runtuh navbar dengan kelas lajur-flex untuk mencapai penjajaran menegak.

   <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3">
   <li>
   <p><strong>Penjajaran dan Padding Pilihan:</strong></p>
   <p>Jika mahu, tambahkan penjajaran dan pelapik tambahan untuk meningkatkan penampilan visual . Contohnya, untuk menjajarkan teks ke kanan dan menambah beberapa padding menegak pada ikon media sosial:</p>
   <pre class="brush:php;toolbar:false">

   ...

2. Variasi Tambahan:

   Eksperimen dengan reka letak alternatif, seperti bar navigasi dengan dua baris di sebelah kanan atau carian dijajarkan ke kanan borang.

Demo dan Kod:

Berikut ialah demo dan kod yang sepadan untuk bar navigasi dengan dua baris:


• [Demo](https://jsfiddle.net/lot99)
• [Kod](https:// codepen.io/anon/pen/VEPqpe?editors=1010)
  

Nota:

Dalam Bootstrap 4.0.0 dan ke atas, pastikan anda menggunakan kod yang dikemas kini mengikut pautan yang disediakan untuk keserasian.