本文摘自PHP中文网，作者(*-*)浩，侵删。
今天用Bootstrap练习仿站时，发现目标站导航栏的菜单是居中排版方式，而Bootstrap貌似没有导航菜单居中的样式，着实折腾了很久，多次测试终于找到了解决方法。
第一种方法：给div和ul添加如下样式：（推荐学习：Bootstrap视频教程）
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="navbar-collapse collapse" style="text-align: center;">
<ul class="nav navbar-nav" style="display: inline-block;float: none;">
<li class="">
<a href="#">首页</a>
</li>
<li class="">
<a href="#">加入我们</a>
</li>
<li class="">
<a href="#">联系我们</a>
</li>
</ul>
</div>
|
第二种方法：
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="">
<a href="#">首页</a>
</li>
<li class="">
<a href="#">加入我们</a>
</li>
<li class="">
<a href="#">联系我们</a>
</li>
</ul>
</div>
|
添加如下样式：
1 2 3 4 5 6 7 8 9 | .navbar-nav {
float: none;
text-align:center;
}
ul.nav.navbar-nav li {
float:none;
display: inline-block;
margin: 0em;
}
|
更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！
以上就是bootstrap导航栏怎么居中的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
bootstrap有什么用处
bootstrap图片轮播由哪三部分组成
bootstrap能分24格吗
bootstrap是css框架吗
如何替换bootstrap中的样式
bootstrap的组件有哪些？
简述为什么要使用bootstrap,有什么优点
bootstrap如何隐藏div
bootstrap 怎么设置字体颜色
浅谈css grid比bootstrap更适合创建布局的原因
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » bootstrap导航栏怎么居中
