Bagaimana untuk Memusatkan Pautan Navbar dalam Twitter Bootstrap?

Mengubah suai Navbar Twitter Bootstrap

Navbar Twitter Bootstrap ialah komponen serba boleh yang boleh disesuaikan untuk menyesuaikan reka letak yang berbeza. Artikel ini menunjukkan cara untuk memusatkan pautan dalam bar navigasi, menangani permintaan pengguna biasa.

Isu: Pautan Tidak Sejajar dalam Navbar

Pada asalnya, pautan dalam bar navigasi adalah dijajar ke kiri, walaupun hasil penjajaran pusat yang dikehendaki. Percubaan untuk menggunakan peraturan CSS yang sedia ada tidak membuahkan hasil yang diingini.

Penyelesaian: Paparan Sebaris dan Penjajaran Teks Berpusat

Untuk memusatkan pautan bar navigasi, kita perlu menetapkan sifat paparan bagi pautan ke blok sebaris dan sifat penjajaran teks bekas navbar ke tengah. Berikut ialah CSS yang diubah suai:

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

Kelas Tersuai untuk Pengubahsuaian Sasaran

Untuk mengelakkan pengubahsuaian yang tidak diingini pada bahagian navigasi lain, adalah dinasihatkan untuk membuat kelas tersuai yang menyasarkan menu bar navigasi yang diingini. Sebagai contoh, kita boleh mencipta kelas yang dipanggil "pusat":

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

Kemudian, kita boleh menyasarkan kelas ini dalam CSS kami:

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

Penjajaran Submenu

Selepas memusatkan pautan utama, mungkin perlu untuk menjajarkan semula item submenu ke kiri jika ia telah dipengaruhi oleh perubahan. Ini boleh dicapai dengan CSS tambahan:

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

Demonstrasi Langsung

Demonstrasi langsung penyelesaian ini boleh didapati di sini: http://jsfiddle.net/C7LWm/7/.

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