Bagaimana untuk Memusatkan Kandungan dengan Sempurna dalam Navbar Bootstrap Responsif?

Cara Memusatkan Kandungan dalam Navbar Bootstrap Responsif

Memusatkan kandungan dalam navbar Bootstrap boleh menjadi tugas yang mengecewakan, terutamanya apabila perkara yang biasa dicadangkan penyelesaian gagal. Artikel ini akan menyediakan kaedah yang mudah dan berkesan untuk menyelesaikan isu ini.

Struktur HTML bar navigasi anda kelihatan standard. Walau bagaimanapun, penggayaan CSS agak terkeluar. Bootstrap menjajarkan kandungan bar navigasi ke kiri secara lalai. Untuk memusatkannya, ikuti langkah berikut:

1. Alih keluar apungan: kiri dari .navbar .navbar-nav: Pengubahsuaian ini mengalih keluar penjajaran kiri daripada navigasi dalam.
2. Tetapkan .navbar .navbar-nav untuk dipaparkan: blok sebaris: Ini menukar pautan navigasi kepada elemen sebaris.
3. Pusat teks dalam .navbar .navbar-collapse: Langkah ini memusatkan kandungan apabila navigasi runtuh.

Berikut adalah kemas kini CSS:

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

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

Penyelesaian ini harus memusatkan kandungan dalam semua saiz skrin. Walau bagaimanapun, jika anda mahukan kesan ini hanya apabila bar navigasi tidak runtuh, anda boleh menggunakan pertanyaan media:

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

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

Ini akan menggunakan kesan pemusatan hanya apabila lebar skrin lebih besar daripada atau sama dengan 768px. Laraskan titik putus mengikut keperluan untuk reka bentuk anda.

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