Bagaimana untuk Memusatkan Item Navigasi dalam Bootstrap 4 Navbar?

Memusatkan Item Navigasi dalam Bootstrap

Dalam Bootstrap 4, menjajarkan item navigasi (pautan) ke tengah navbar boleh dicapai dengan menggunakan sifat flexbox. Begini caranya:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">

CSS:

.navbar {
    display: flex;
    justify-content: center;
}

Kod di atas menggunakan sifat paparan flexbox untuk menetapkan bar navigasi kepada bekas flex dan kandungan justify untuk menjajarkan item navigasi ke pusat. Kelas runtuh Bootstrap digunakan untuk menyembunyikan item navigasi pada saiz skrin yang lebih kecil.

Pelarasan Responsif

Untuk responsif, anda boleh menggunakan kelas utiliti mr-auto Bootstrap untuk memastikan item navigasi dipusatkan dengan betul sebagai saiz penyemak imbas perubahan:

<div class="collapse navbar-collapse mr-auto">

Contoh

Pertimbangkan kod berikut:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">

CSS:

@media (min-width: 768px) {
    .navbar-nav {
        justify-content: center;
    }
}

Ini kod menambah pertanyaan media yang menetapkan kandungan justify sewajarnya apabila lebar tetingkap penyemak imbas lebih besar daripada 768px, memusatkan item navigasi hanya pada skrin yang lebih besar.

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