Bagaimanakah saya memusatkan elemen dalam Navbar Bootstrap?-tutorial css-php.cn

Bagaimanakah saya memusatkan elemen dalam Navbar Bootstrap?

Susan Sarandon

Lepaskan： 2024-12-14 01:49:09

asal

962 orang telah melayarinya

How do I center an element within a Bootstrap Navbar?

Memusatkan Elemen dalam Bootstrap Navbar

Isu: Walaupun terdapat pelbagai percubaan, pengguna gagal memusatkan elemen dalam Bootstrap navbar.

Jawapan:

Bootstrap 5 (2021)

Navbar menggunakan flexbox, membolehkan anda memusatkan elemen menggunakan kelas mx-auto.

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

Salin selepas log masuk

Bootstrap 4.1

Untuk Bootstrap 4.1 dan ke atas, gunakan mx-auto dan bukannya tarik-kiri dan tarik-kanan untuk menjajarkan menu kiri dan kanan:

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

Salin selepas log masuk

Pilihan Pemusatan Lain

Kedudukan: mutlak;: Tetapkan elemen untuk dipusatkan ke kedudukan: mutlak; dan gunakan transform: translateX(-50%);.
Flexbox nesting: Jadikan item tengah turut dipaparkan: flexbox dan justify-content: center.

Ingat, penyelesaian ini mungkin mempunyai kelemahan, seperti tidak menjajarkan elemen berpusat dengan sempurna dengan elemen bersebelahan yang berbeza-beza. lebar.

Nota Tambahan:

Pastikan anda menggantikan main-nav dengan nama kelas navbar yang anda inginkan.
Jika Navbar anda mempunyai satu navbar-nav, gunakan justify-content-center untuk memusatkannya.
Untuk memusatkan elemen pada desktop tetapi selaraskannya ke kiri pada mudah alih, gunakan pertanyaan media.
Terokai [dokumentasi Bootstrap](https://getbootstrap.com/docs/4.5/components/navbar/) untuk mendapatkan maklumat lanjut tentang penyesuaian Navbar .

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