Bagaimana untuk Memusatkan Pautan Navigasi dalam Navbar Bootstrap Twitter?

Mengubah suai Twitter Bootstrap Navbar ke Pusat Pautan

Apabila bekerja dengan Twitter Bootstrap navbar, pengguna mungkin menghadapi keperluan untuk menjajarkan pautan navigasi secara berpusat, bukannya penjajaran kiri lalai . Untuk mencapai matlamat ini, buat penyesuaian berikut menggunakan helaian gaya CSS.

Penyelesaian

Untuk memusatkan pautan navigasi dalam bar navigasi, laksanakan kod CSS berikut:

<code class="css">.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;
}</code>

Pendekatan Alternatif

Untuk mengekalkan lalai Bootstrap dan menyasarkan menu bar navigasi tertentu, buat kelas tersuai dan gunakannya pada bekas bar navigasi:

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

Kemudian, sasarkan kelas .center dalam Lembaran gaya CSS:

<code class="css">.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;
}</code>

Pertimbangan Tambahan

Untuk menjajarkan item submenu ke kiri, tambah peraturan CSS berikut:

<code class="css">.center .dropdown-menu {
    text-align: left;
}</code>

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