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

使用集中連結自訂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中文網其他相關文章！