如何将所有内容放在导航栏中

Question

我想将所有内容放在引导导航栏中，这是我的代码：

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

我想将div以类“ container-fluid”居中，我尝试在此div中添加“ margin：0 auto; float：none”，但是我添加了以下内容：

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

仍然不起作用

Answer 1

您可以添加.navbar { display: flex; } .navbar { display: flex; } （然后不需要其他CSS）

https://codepen.io/anon/pen/YEbrPz

Answer 2

最简单的解决方法是先从nav和div标签中删除该类，然后再添加center标签。

 <nav> <center> <div> <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> </center> </nav> 

Answer 3

或者使用固定宽度的包装纸（如果navbar不会改变很多）。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="wrap" style="
    margin: 0 auto;
    width: 550px;
">
    <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>
  </div>
</nav>

Answer 4

问题在于.navbar-header和.navbar-brand都是float:left ，因此您需要显式覆盖它。 然后，可以通过将它们更改为display:inline-block并将.text-center类添加到它们的容器中来使它们.text-center 。

 .navbar .text-center > * { float: none; display: inline-block; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-default"> <div class="container-fluid text-center"> <!-- added text-center class here --> <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>