Bagaimana untuk Memusatkan Pautan Navbar Bootstrap Twitter?

Memusatkan Pautan Navbar Bootstrap Twitter

Dalam percubaan untuk menyelaraskan pautan dalam bar navigasi Twitter Bootstrap ke tengah, pengguna menghadapi cabaran dalam melaksanakan CSS yang dicadangkan:

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

Walau bagaimanapun, penyelesaian alternatif wujud.

Pendekatan 1: Paparan Inline-Block

Item menu berpusat boleh dicapai dengan menetapkan sifat paparan kedua-dua navbar dan elemen linya kepada inline-block , memastikan ia kelihatan bersebelahan tanpa sebarang pelampung.

.navbar .nav,
.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

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

Pendekatan 2: Tersuai Kelas

Sebagai alternatif, menggunakan kelas tersuai, seperti "pusat", boleh menghalang kemungkinan konflik dengan bahagian halaman lain.

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

Dan CSS yang sepadan:

.center .navbar .nav,
.center .navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

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

Pembetulan Penjajaran Submenu

Akhir sekali, untuk jajarkan semula item submenu ke kiri, CSS berikut diperlukan:

.center .dropdown-menu {
    text-align: left;
}

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