Bagaimanakah saya boleh memusatkan elemen dalam navbar Bootstrap?

Memusatkan Elemen dalam Bootstrap Navbar

Memusatkan elemen dalam Bootstrap Navbar boleh mencabar kerana cara komponen disusun secara fleksibel. Walau bagaimanapun, berikut ialah beberapa cara berkesan untuk mencapai perkara ini:

Bootstrap 5 (2021)

Navbar masih menggunakan flexbox, jadi prinsip penjajaran kekal serupa dengan Bootstrap 4. "Nama Laman Web" boleh dipusatkan menggunakan mx-auto. Menu sebelah kiri dan kanan tidak lagi perlu diapungkan.

Contoh Kod:

<nav></nav>

Bootstrap 4.1

Navbar kini memanfaatkan flexbox, membolehkan pemusatan menggunakan mx-auto. Menu sebelah kiri dan kanan tidak lagi memerlukan penggunaan terapung.

Contoh Kod:

<nav></nav>

Bootstrap 4 Beta

Jika Navbar hanya menampilkan satu navbar-nav, anda juga boleh menggunakan justify-content-center untuk menjajarkan kandungan.

Navbar Centering with Absolute Position

Anda boleh meletakkan elemen yang anda mahu pusatkan secara mutlak menggunakan :

.abs-center-x { position: absolute; left: 50%; transform: translateX(-50%); }

Pemusatan Navbar dengan Flexbox Bersarang

Pilihan lain ialah memusatkan item menggunakan flexbox:

Nota: Penyelesaian di atas memusatkan "Nama Laman Web" berbanding sebelah kiri dan navbar-nav kanan. Menambah kelas flex-fill memastikan setiap bahagian memenuhi lebar Navbar, mengelakkan salah jajaran apabila bahagian bersebelahan berbeza lebar.

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