Bagaimanakah saya boleh memusatkan pautan dalam bar navigasi Twitter Bootstrap?

Menyesuaikan Navbar Twitter Bootstrap dengan Pautan Berpusat

Twitter Bootstrap menyediakan rangka kerja yang teguh untuk membina reka bentuk web responsif, termasuk komponen navbar yang serba boleh. Walau bagaimanapun, jika anda ingin menyimpang daripada pautan lalai dijajar kiri dalam bar navigasi, anda perlu membuat beberapa pelarasan CSS.

Penyelesaian 1: Menggunakan .tabs dan .pills

Dalam siaran terdahulu, anda cuba memusatkan pautan menggunakan .tabs dan .pills. Walau bagaimanapun, pendekatan ini tidak berjaya kerana Bootstrap menggunakan gaya ini secara khusus pada tab navigasi dan kawalan penomboran, bukan pada bar navigasi utama.

Penyelesaian 2: Menyesuaikan kelas .nav dan .navbar-dalam

Untuk memusatkan pautan bar navigasi, pendekatan yang betul ialah mengubah suai gaya untuk .nav, yang mengandungi pautan dan .navbar-inner, yang menetapkan penjajaran keseluruhan bar navigasi. Berikut ialah CSS yang dikemas kini:

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

CSS ini akan mengatasi gaya lalai dan menyebabkan pautan navbar dipaparkan secara mendatar tengah.

Menggunakan Kelas Tersuai untuk Penyesuaian Sasaran

Untuk mengelak daripada menjejaskan elemen navigasi lain pada halaman anda, anda boleh membuat kelas tersuai untuk bar navigasi sasaran anda. Contohnya:

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

Kemudian, anda boleh menggunakan CSS berikut pada kelas tersuai ini:

<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

Selepas memusatkan pautan bar navigasi, ingat untuk menjajarkan semula item submenu ke kiri. Gunakan CSS tambahan ini:

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

Pengubahsuaian ini akan berjaya memusatkan pautan bar navigasi tanpa menjejaskan fungsi atau penggayaan elemen navigasi lain.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memusatkan pautan dalam bar navigasi Twitter Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!