Twitter Bootstrap 導覽列為網站導覽提供了實用的解決方案。但是,有時您可能想要自訂其外觀,例如使導航連結居中。
修改導覽列的對齊方式需要一些 CSS 程式碼。然而,某些方法可能不會產生預期的結果。讓我們探索正確的方法。
要居中導覽選單項,請將其顯示屬性設為 inline-block 而不是 float: left。這將允許項目水平對齊而不破壞佈局。此外,將導覽列內部容器的文字對齊屬性設定為居中。
<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>
<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/show /
以上是如何將 Twitter Bootstrap 導覽列導覽連結居中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!