Bootstrap怎么让导航条内所有内容居中?

标签: bootstrap
发布时间: 2017/12/8 16:37:20
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想让导航条内的所有内容都居中,我的代码:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

我添加了下面的CSS试图让DIV居中,但是没成功:

.container-fluid {
      margin: 0 auto !important;
      float: none !important;
}


解决方法 1:

使用这个CSS:

.navbar { display: flex; }


赞助商