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

修改 Twitter Bootstrap 導覽列：讓導覽連結居中

Twitter Bootstrap 導覽列為網站導覽提供了實用的解決方案。但是，有時您可能想要自訂其外觀，例如使導航連結居中。

問題：讓導覽連結居中

修改導覽列的對齊方式需要一些 CSS 程式碼。然而，某些方法可能不會產生預期的結果。讓我們探索正確的方法。

解決方案：內聯區塊佈局和文字對齊

要居中導覽選單項，請將其顯示屬性設為 inline-block 而不是 float: left。這將允許項目水平對齊而不破壞佈局。此外，將導覽列內部容器的文字對齊屬性設定為居中。

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

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

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