如何在 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中文網其他相關文章！