本文摘自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是什么意思啊
bootstrap的轮播图怎么实现
bootstrap 如何取消自适应
bootstrap是做什么的
bootstrap-switch如何设置初始值
当 position:sticky 遇到 bootstrap 浮动布局时候的踩坑记录
bootstrap 如何设置移动端元素隐藏
bootstrap是什么时间开源的
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » bootstrap导航栏怎么居中
