首頁  >  文章  >  web前端  >  如何將 Twitter Bootstrap 導覽列導覽連結居中?

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

Susan Sarandon
Susan Sarandon原創
2024-11-01 10:53:021023瀏覽

How to Center Twitter Bootstrap Navbar Navigation Links?

修改 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中文網其他相關文章!

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