Bagaimana untuk Memusatkan Pautan Navigasi Navbar Bootstrap Twitter?

Ubah suai Navbar Bootstrap Twitter: Memusatkan Pautan Navigasi

Navbar Twitter Bootstrap menawarkan penyelesaian praktikal untuk navigasi tapak web. Walau bagaimanapun, kadangkala anda mungkin mahu menyesuaikan penampilannya, seperti memusatkan pautan navigasi.

Masalah: Memusatkan Pautan Navigasi

Mengubah suai penjajaran bar navigasi memerlukan beberapa kod CSS. Walau bagaimanapun, beberapa kaedah mungkin tidak memberikan hasil yang diinginkan. Mari kita teroka pendekatan yang betul.

Penyelesaian: Reka Letak Sebaris-Sekat dan Penjajaran Teks

Untuk memusatkan item menu nav, tetapkan sifat paparannya kepada sekatan sebaris dan bukannya apungan: kiri. Ini akan membolehkan item dijajarkan secara mendatar tanpa melanggar reka letak. Selain itu, tetapkan sifat penjajaran teks bekas dalam bar navigasi ke tengah.

<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>

Menyasarkan Kejadian Navbar Tertentu

Jika anda mempunyai berbilang bar navigasi pada halaman web anda, adalah disyorkan untuk membuat kelas CSS khusus untuk menyasarkan bar navigasi khusus yang anda mahu pusatkan. Ini akan menghalang kesan yang tidak diingini pada bar navigasi lain.

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

<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>

Menjajarkan Item Submenu

Perlu diperhatikan bahawa CSS di atas juga akan menjejaskan item submenu, menyebabkan item tersebut turut dipusatkan . Jika anda lebih suka item submenu dijajarkan ke kiri, tambah gaya berikut:

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

Demo

Lihat demo langsung di: http://jsfiddle.net/C7LWm/show /

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