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

集中Twitter Bootstrap 導覽列連結

在嘗試將Twitter Bootstrap 導覽列中的連結對齊到中心時，使用者在實現建議的CSS：

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

但是，有替代解決方案。

方法1：內聯區塊顯示

居中選單項目可以透過以下方式實現將導覽列及其li 元素的顯示屬性設為inline-block，確保它們並排顯示而沒有任何浮動。

.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;
}

方法 2：自訂類別

或者，應用自訂類，例如“center”，可以防止與其他頁面部分的潛在衝突。

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

以及對應的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;
}

子選單對齊修復

最後，要將子選單項目重新對齊，需要以下CSS：

.center .dropdown-menu {
    text-align: left;
}

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