Bagaimana untuk Memusatkan Item Navigasi dengan Sempurna dalam Navbar Bootstrap?

Memusatkan Item Navigasi dalam Bootstrap

The Challenge

Dalam Bootstrap, menumpukan item navigasi (pautan) dalam bar navigasi mengikut saiz tetingkap penyemak imbas boleh menjadi tugas yang sukar. Pendekatan Bootstrap standard, menggunakan kelas mr-auto dan ml-auto, memusatkan navigasi secara berkesan berdasarkan lebar tetingkap penyemak imbas tolak lebar logo. Untuk mencapai pemusatan yang sempurna, kami memerlukan penyelesaian yang lebih tepat.

Penyelesaian

Menggunakan Flexbox dan Utiliti Margin Secara Responsif

Bootstrap 4 menyediakan d- kelas flex dan mx-auto, yang membolehkan kami mencapai pemusatan responsif. Begini caranya:

<div class="d-md-flex d-block flex-row mx-md-auto mx-0">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse mr-auto">

Dalam kod ini:

• Kelas .d-md-flex menjadikan bekas navigasi fleksibel dalam skrin bersaiz sederhana (dan lebih besar) dan menetapkan paparannya kepada lentur.
• Kelas .d-block menyasarkan skrin yang lebih kecil dan menjadikan bekas navigasi sebagai blok.
• Kelas .flex-row menyusun elemen anak kontena navigasi secara mendatar.
• Kelas .mx-md-auto memusatkan bekas navigasi secara mendatar dalam skrin bersaiz sederhana dan lebih besar.
• Kelas .mx-0 mengalih keluar jidar mendatar dalam skrin yang lebih kecil untuk memastikan betul penjajaran.
• Kelas .mr-auto menyelaraskan ke kanan item navigasi yang runtuh.

Pendekatan ini secara responsif memusatkan item navigasi mengikut saiz tetingkap penyemak imbas, memastikan penjajaran sempurna.

Nota Tambahan

• Untuk Bootstrap 4.1 dan ke atas, anda boleh menggunakan .mx-auto terus pada elemen .navbar-nav untuk mencapai kesan yang sama.
• Jika anda mahu item navigasi betul-betul berpusat dalam port pandangan, pertimbangkan untuk menggunakan grid CSS pendekatan.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Item Navigasi dengan Sempurna dalam Navbar Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!