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