首頁 > web前端 > css教學 > 主體

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

DDD
發布: 2024-11-01 09:26:02
原創
1012 人瀏覽過

How to Center Navigation Links in Twitter Bootstrap Navbar?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!