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