使用集中連結自訂Twitter Bootstrap 的導覽列
Twitter Bootstrap 提供了一個用於建立響應式網頁設計的強大框架，包括多功能導覽列組件。但是，如果您想偏離導航欄中預設的左對齊鏈接，則需要進行一些 CSS 調整。
解決方案 1：使用 .tabs 和 .pills
在之前的文章中，您嘗試使用 .tabs 和 .pills 將連結居中。但是，這種方法不起作用，因為 Bootstrap 將這些樣式專門應用於導覽標籤和分頁控件，而不是主導覽列。
解決方案2：自定義.nav 和.navbar-inner 類
為了集中導航欄鏈接，正確的方法是修改包含鏈接的.nav 和設置導覽列整體對齊方式的.navbar-inner 的樣式。以下是更新的 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>此 CSS 將覆蓋預設樣式，並使導覽列連結水平居中顯示。
使用自訂類別進行目標自訂
為了避免影響頁面上的其他導覽元素，您可以為目標導覽列建立自訂類別。例如：
<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>這些修改將成功地將導覽列連結居中，而不會影響其他導覽元素的功能或樣式。
以上是如何將連結置於 Twitter Bootstrap 導覽列中的中心？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
