bootstrap导航栏怎么居中

互联网 19-7-17

今天用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导航栏怎么居中的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： bootstrap

bootstrap导航栏怎么居中

相关资讯

标签推荐