Bagaimanakah Saya Memusatkan Elemen dalam Navbar Bootstrap?

Memusatkan Elemen dalam Bootstrap Navbar

Apabila cuba memusatkan elemen dalam navbar Bootstrap, ia mungkin kelihatan mencabar. Walau bagaimanapun, dengan teknik yang betul, ia boleh dicapai.

Bootstrap 4 dan Kemudian

Bootstrap 4 dan versi yang lebih baru menggunakan flexbox, yang memudahkan proses penjajaran. Untuk memusatkan elemen, seperti "Nama Laman Web", tambahkan kelas "mx-auto" pada "nav.navbar-nav" yang mengandunginya. Ini akan memusatkannya berbanding dengan elemen "nav.navbar-nav" kiri dan kanan.

Contohnya:

<nav class="navbar navbar-dark bg-dark main-nav">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Download</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Register</a>
      </li>
    </ul>

    <ul class="nav navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Rates</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Help</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Versi Bootstrap Sebelumnya

Untuk versi Bootstrap sebelum 4, pemusatan diperlukan menggunakan sarang atau kedudukan flexbox: mutlak teknik.

Pilihan Tambahan

Jika Navbar mengandungi hanya satu "nav.navbar-nav," anda boleh menggunakan "justify-content-center" untuk memusatkannya kandungan.

Pemusatan Mutlak

Kepada mencapai pemusatan mutlak, anda boleh menggunakan sama ada kedudukan: kaedah mutlak atau sarang flexbox.

Kedudukan Mutlak

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Flexbox Nesting

Sarangkan item berpusat dalam bekas flexbox lain dengan "justify-content-center" dan "fill-fill" digunakan.

<ul class="nav navbar-nav flex-fill">
  <li class="nav-item">
    <ul class="nav navbar-nav justify-content-center">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
  </li>
</ul>

Atas ialah kandungan terperinci Bagaimanakah Saya Memusatkan Elemen dalam Navbar Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!