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