Bagaimana untuk Memusatkan Kandungan dalam Navbar Bootstrap Responsif?

Bagaimana untuk Memusatkan Kandungan dalam Navbar Bootstrap Responsif

Bersusah payah untuk menjajarkan kandungan dalam navbar Bootstrap anda? Berikut ialah penyelesaian komprehensif yang telah berfungsi dengan pasti untuk ramai pengguna.

Memahami Isu

Penjajaran navbar lalai Bootstrap boleh menjadi masalah, terutamanya apabila menyasarkan reka letak responsif. Selalunya penyebabnya ialah apungan: harta kiri yang dikaitkan dengan navigasi dalam.

Penyelesaian

Untuk memusatkan kandungan, anda perlu mengalih keluar apungan: kiri dari nav dalam dan jadikannya sebagai blok sebaris. Selain itu, menetapkan sifat penjajaran teks ke tengah akan menjajarkan kandungan secara mendatar.

Pengubahsuaian CSS

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

Contoh

Melaksanakan perubahan CSS ini akan memusatkan kandungan dalam anda navbar.

<!-- ...navbar code here -->

<style>
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }
</style>

<!-- ...navbar code here -->

Pertimbangan Tambahan

Untuk memastikan perubahan penjajaran hanya berlaku untuk navbar yang tidak runtuh, pertimbangkan untuk melampirkan pengubahsuaian CSS dalam pertanyaan media yang sesuai.

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }
}

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Kandungan dalam Navbar Bootstrap Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!