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

2. Penjajaran dan Padding Pilihan:

   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:

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

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