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">
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.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">
<p><strong>Contoh</strong></p>
<p>Pertimbangkan kod berikut:</p>
<pre class="brush:php;toolbar:false"><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">
<p>CSS:</p>
<pre class="brush:php;toolbar:false">@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.