Bagaimanakah saya boleh memusatkan item navigasi dalam Bootstrap 4?

Memusatkan Item Navigasi dalam Bootstrap

Dalam Bootstrap 4, menjajarkan item navigasi (pautan) secara mendatar boleh dicapai menggunakan flexbox dan utiliti margin.

Bootstrap 4 Alpha 6 dan Kemudian

Untuk memusatkan kedua-dua jenama dan pautan dalam Bootstrap 4 alpha 6 dan seterusnya:

<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">

Dalam kod ini, kelas d-md-flex dan d-block digunakan untuk menjajarkan jenama dan pautan secara mendatar dalam skrin bersaiz sederhana dan ke atas. Kelas flex-row memastikan item disusun bersebelahan. Kelas mx-md-auto dan mx-0 memusatkan item dalam ruang yang tersedia, melaraskan untuk lebar imej jenama.

Bootstrap 4.1

Untuk Bootstrap 4.1:

<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="collapse navbar-collapse">

Dalam kes ini, mx-auto digunakan terus pada navbar-nav untuk memusatkan pautan sahaja. Jenama boleh dipusatkan menggunakan teknik lain seperti justify-content-center.

Letakkan Pautan Tepat dalam Viewport

Untuk memusatkan pautan tepat dalam viewport, pertimbangkan ini teknik:

<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="navbar-nav">

Di sini, navbar-nav diberi lebar tetap dan justify-content: tengah untuk menjajarkan pautan dengan tepat di tengah-tengah skrin.

Untuk penyesuaian lanjut dan contoh tambahan, rujuk pautan yang disediakan dalam bahagian rujukan di bawah.

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