广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

今天用Bootstrap练习仿站时，发现目标站导航栏的菜单是居中排版方式，而Bootstrap貌似没有导航菜单居中的样式，着实折腾了很久，多次测试终于找到了解决方法。

第一种方法：给div和ul添加如下样式：（推荐学习：Bootstrap视频教程）

<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>

第二种方法：

<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>

添加如下样式：

.navbar-nav {  float: none;  text-align:center;}ul.nav.navbar-nav  li {    float:none;    display: inline-block;    margin: 0em;}

更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

以上就是bootstrap导航栏怎么居中的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~