Bagaimana untuk Memusatkan Pautan Navigasi dengan Tepat dalam Navbar Bootstrap 4?

Memusatkan Nav-Item dalam Bootstrap

Tugas untuk memusatkan pautan navigasi dalam bar navigasi Bootstrap 4, berbanding dengan saiz tetingkap penyemak imbas, mempunyai terbukti sebagai cabaran biasa. Walaupun penyelesaian mudah menggunakan ml-auto dan mr-auto mungkin hampir, ia tidak mencapai pemusatan yang tepat.

Untuk menangani perkara ini, kami menyediakan pendekatan komprehensif yang menggunakan flexbox dan utiliti margin secara responsif.

Bootstrap 4 Alpha 6 dan seterusnya

Dalam Bootstrap versi 4 Alpha 6 dan ke atas, kod berikut menyediakan pemusatan jenama dan pautan:

<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" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <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">

Bootstrap 4.1

Dalam Bootstrap 4.1 dan seterusnya, strategi pemusatan kekal sama. Berikut ialah contoh yang menjajarkan pautan dan meletakkan jenama ke kiri pada mudah alih:

<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" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">

Pemusatan Pautan Tepat dalam Viewport

Jika anda memerlukan pautan yang tepat berpusat dalam viewport, cuba pendekatan ini:

<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" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">

Rujuk pautan yang disediakan untuk contoh selanjutnya navbar penjajaran dalam Bootstrap 4.

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