首頁  >  文章  >  web前端  >  如何在 Twitter Bootstrap 中將導覽列連結居中?

如何在 Twitter Bootstrap 中將導覽列連結居中?

Susan Sarandon
Susan Sarandon原創
2024-11-01 03:11:28708瀏覽

How to Center Navbar Links in Twitter Bootstrap?

修改 Twitter Bootstrap 的導覽列

Twitter Bootstrap 導覽列是多功能元件,可以自訂以適應不同的版面。本文示範如何將導覽列中的連結居中,解決常見的使用者請求。

問題:導覽列中的連結未對齊

最初,導覽列中的連結是左對齊的,儘管中心對齊的預期結果。嘗試使用預先存在的 CSS 規則沒有產生所需的結果。

解決方案:內嵌顯示和居中文字對齊

要讓導覽列連結居中,我們需要設定連結到內聯區塊和導覽列容器的文字對齊屬性居中。以下是修改後的CSS:

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

有針對性修改的自訂類別

為了避免對其他導覽部分進行不必要的修改,建議建立一個針對所需導覽列選單的自訂類別。例如,我們可以建立一個名為「center」的類別:

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

然後,我們可以在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>

子選單對齊

將主連結置中後,如果子選單項目受到變更的影響,則可能需要將子選單項目重新向左對齊。這可以透過附加 CSS 來實現:

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

即時演示

可以在此處找到此解決方案的即時演示:http://jsfiddle.net/C7LWm/7/。

以上是如何在 Twitter Bootstrap 中將導覽列連結居中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn