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