使用集中連結自訂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中文網其他相關文章!