Bagaimanakah Saya Memusatkan Kandungan Navbar dalam Bootstrap 3 Menggunakan CSS?

Kandungan CSS ke Pusat Navbar

Bergelut untuk memusatkan kandungan dalam bar navigasi Bootstrap? Jangan berputus asa! Mari kita selesaikan masalah menggunakan coretan kod HTML dan CSS yang disediakan.

Masalah:

Menggunakan Bootstrap 3, tetapi kaedah sedia ada tidak menjajarkan kandungan secara berpusat dalam bar navigasi.

Kod HTML:

Disediakan untuk rujukan (tetapi tidak disertakan di sini).

CSS yang disemak:

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

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

Penjelasan:

• Terapung dialih keluar: kiri dari .navbar .navbar-nav ke tengah bahagian dalam navigasi.
• Tetapkan paparan: blok sebaris untuk mengekalkan penjajaran mendatar.
• Jajaran menegak terlaras: atas untuk penjajaran yang betul.
• Disertakan .navbar .navbar-collapse untuk menjajarkan kandungan dalaman runtuh navbars.

Snippet Diperbaiki:

<div class="navbar navbar-default" role="navigation">
  <!-- ... -->

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

  <!-- ... -->
</div>

Pelarasan Responsif:

Untuk mengehadkan kesan pemusatan kepada bar navigasi yang tidak diruntuhkan, tambahkan media ini pertanyaan:

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

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

Kini, kandungan bar navigasi anda akan dipusatkan dengan mudah dalam keadaan runtuh dan tidak runtuh.

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