脚本宝典收集整理的这篇文章主要介绍了bootstrap导航栏怎么居中,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。今天用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导航栏怎么居中的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的bootstrap导航栏怎么居中全部内容,希望文章能够帮你解决bootstrap导航栏怎么居中所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。