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>為了避免對其他導覽部分進行不必要的修改，建議建立一個針對所需導覽列選單的自訂類別。例如，我們可以建立一個名為「center」的類別：
<code class="html"><div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div></code>然後，我們可以在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>可以在此處找到此解決方案的即時演示：http://jsfiddle.net/C7LWm/7/。
以上是如何在 Twitter Bootstrap 中將導覽列連結居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
