首頁 >web前端 >css教學 >如何將連結置於 Twitter Bootstrap 導覽列中的中心?

如何將連結置於 Twitter Bootstrap 導覽列中的中心?

Patricia Arquette
Patricia Arquette原創
2024-11-02 04:41:021035瀏覽

How can I center the links in Twitter Bootstrap's navbar?

使用集中連結自訂Twitter Bootstrap 的導覽列

Twitter Bootstrap 提供了一個用於建立響應式網頁設計的強大框架,包括多功能導覽列組件。但是,如果您想偏離導航欄中預設的左對齊鏈接,則需要進行一些 CSS 調整。

解決方案 1:使用 .tabs 和 .pills

在之前的文章中,您嘗試使用 .tabs 和 .pills 將連結居中。但是,這種方法不起作用,因為 Bootstrap 將這些樣式專門應用於導覽標籤和分頁控件,而不是主導覽列。

解決方案2:自定義.nav 和.navbar-inner 類

為了集中導航欄鏈接,正確的方法是修改包含鏈接的.nav 和設置導覽列整體對齊方式的.navbar-inner 的樣式。以下是更新的 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>

此 CSS 將覆蓋預設樣式,並使導覽列連結水平居中顯示。

使用自訂類別進行目標自訂

為了避免影響頁面上的其他導覽元素,您可以為目標導覽列建立自訂類別。例如:

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

這些修改將成功地將導覽列連結居中,而不會影響其他導覽元素的功能或樣式。

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

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