Bagaimana untuk Memusatkan Kandungan dalam Bootstrap 3 Navbar?

Memusatkan Kandungan dalam Navbar Bootstrap Responsif

Soalan:

Walaupun meneroka pelbagai penyelesaian dalam talian, anda menghadapi masalah memusatkan kandungan dalam bar navigasi Bootstrap 3 anda. Bolehkah anda membantu dengan CSS atau kaedah yang menyelaraskan kandungan dengan sewajarnya sambil mengekalkan keserasian kod?

Kod Contoh:

<nav class="navbar navbar-default" role="navigation">
  <!--- ... -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!--- ... -->
    </ul>
  </div>
</nav>

Jawapan:

Kaedah:

Untuk memusatkan kandungan, ubah suai CSS kelas .navbar .navbar-nav dan .navbar .navbar-collapse seperti berikut:

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

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

Penjelasan:

Perubahan ini membolehkan anda kepada:

• Alih keluar apungan lalai: kiri harta daripada .navbar .navbar-nav, membenarkan item menjajarkan sebelah-menyebelah.
• Tetapkan paparan: inline-block; untuk menjadikan item nav elemen sebaris, mengekalkan jarak yang betul.
• Pusat teks dalam bar navigasi menggunakan text-align: center; pada. pertanyaan media, menyasarkan saiz skrin yang sesuai.

Bermain-main dengan CSS untuk memperhalusi penempatan kandungan.

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