Bagaimanakah saya boleh membuat navbar dua baris dalam Bootstrap 4?-tutorial css-php.cn

Bagaimanakah saya boleh membuat navbar dua baris dalam Bootstrap 4?

Susan Sarandon

Lepaskan： 2024-12-10 00:55:10

asal

212 orang telah melayarinya

How can I create a two-row navbar in Bootstrap 4?

Bootstrap 4 navbar dengan 2 baris

Dalam Bootstrap 4, adalah mungkin untuk mencipta navbar dengan dua baris dengan menggunakan kelas utiliti flexbox. Begini cara anda boleh mencapai ini:

Tambah kelas lajur-flex pada div .navbar-collapse. Ini akan menyusun dua bar navigasi secara menegak.

Tetapkan sifat lajur arah-flex: pada elemen .navbar-jenama. Ini akan menjajarkan logo secara menegak dengan pautan bar navigasi.

Secara pilihan, anda boleh menambah kelas baris-lentur pada bar navigasi kedua untuk menyelaraskan ikon secara mendatar.

Berikut ialah versi kod anda yang dikemas kini:


    
        
        
        
Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat navbar dua baris dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Membuat Senarai Tidak Tertib Dua Lajur Menggunakan CSS dan JavaScript? Artikel seterusnya：Bagaimana untuk Mensimulasikan CSS `saiz latar belakang: penutup` Menggunakan Kanvas?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2166

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2315

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1950

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...