bootstrap导航栏怎么居中

来源：懂视网责编：小采时间：2020-11-27 15:01:43

bootstrap导航栏怎么居中

bootstrap导航栏怎么居中:今天用Bootstrap练习仿站时，发现目标站导航栏的菜单是居中排版方式，而Bootstrap貌似没有导航菜单居中的样式，着实折腾了很久，多次测试终于找到了解决方法。第一种方法：给div和ul添加如下样式：（推荐学习：Bootstrap视频教程）<div class

推荐度：

点击下载本文 文档为doc格式

导读bootstrap导航栏怎么居中:今天用Bootstrap练习仿站时，发现目标站导航栏的菜单是居中排版方式，而Bootstrap貌似没有导航菜单居中的样式，着实折腾了很久，多次测试终于找到了解决方法。第一种方法：给div和ul添加如下样式：（推荐学习：Bootstrap视频教程）<div class

今天用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导航栏怎么居中

推荐度：

点击下载本文 文档为doc格式

标签：如何居中导航栏

热门焦点

bootstrap导航栏怎么居中

bootstrap导航栏怎么居中

bootstrap导航栏怎么居中

最新推荐

猜你喜欢

热门推荐