Question

我想将所有内容集中在bootstrap导航栏中，它是我的代码：

    <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放在班级＆＃34;容器流体＆＃34;，我试过添加＆＃34; margin：0 auto;浮：无＆＃34;这个div，但它不起作用我补充说：

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

仍然无法运作

Answer 1

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

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

Answer 2

最简单的方法是从第一个nav和div标签中删除该类，然后添加中心标记。

<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

或者制作具有固定宽度的包装（如果导航栏没有改变很多）。

<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类添加到其容器中心。

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

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

4 个答案: