如何在 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>

替代方法

要保留Bootstrap 預設值並定位特定的導覽列選單，請建立一個自訂類別並將其套用到導覽列容器：

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

然後，將.center 類別作為目標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中文網其他相關文章！