本文摘自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只加载一次 remote 数据的问题
web 开发里程碑时刻：bootstrap 宣布放弃支持 ie
bootstrap适合做什么网站
bootstrap是ui框架吗
不用bootstrap的理由有哪些
bootstrap原理是什么
使用bootstrap有什么好处
bootstrap怎么实现分页技术
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » bootstrap导航栏怎么居中
