Bootstrap“navbar-brand”导致“navbar-nav”项目从导航栏中的中心位置向右移动？

Question

我正在尝试创建一个左侧有“品牌”（LOGO）的导航栏，以及整个栏中心的实际导航项。我正在使用默认的Bootstrap导航栏，因为我刚开始学习一周前的Web开发。这是迄今为止的样子：

但是，您可以看到导航项稍微移动到页面实际中心的右侧（标题“这是HOME页面。”正好在页面的中心）。 以下是我认为可能相关的部分代码：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container-fluid {
  background-color: white;
  border: none;
  box-shadow: none;
}
.content {
  padding-top: 65px;
  width: 100%;
  height: 100%;
}
.navbar .navbar-collapse {
  text-align: center;
  background-color: cyan;
}
.navbar .navbar-nav {
  margin: 1%;
  display: inline-block;
  float: none;
  vertical-align: center;
  text-decoration: bold;
  text-align: center;
}
.navbar-default {
  background-color: white;
  box-shadow: none;
  text-align: center;
}
.navbar-header {
  margin: 1%;
}

<!-- Navigation bar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html" id="logo">LOGO</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </div>
  <!-- /.navbar-collapse -->
</div>
  <!-- /.container-fluid -->
</nav>

我怀疑“导航栏品牌”，因为当我尝试更改“.navbar .navbar-collapse”的文本对齐时，它似乎会以某种方式发生干扰（为了便于格式化而着色为青色）设置为“中心”，因为StackOverflow上的其他答案已建议。

例如，当我将text-align更改为“left”时：

.navbar .navbar-collapse {
  text-align: left;
  background-color: cyan;
}

导航栏如下所示：

将text-align更改为“right”将导航项一直推到青色条的右侧，如预期的那样。

因此，似乎导航项目在“导航栏品牌”和栏的右侧之间居中，而不是在整个栏的实际左侧和右侧之间。

有没有人对如何使我的导航项目在整个栏中准确居中有任何建议，以便它们与标题“这是主页”一致。并没有转移到右边？

Answer 1

有几种不同的方法可以做到这一点，我想这取决于你将在赛道上做些什么，但最简单的方法可能是采用 .navbar-brand 超出文档流程，以便 .navbar-nav 在居中时忽略它。

您可以通过添加以下内容轻松完成此操作：

.navbar-brand {
  position: absolute;
}

您可以在此处查看：http://codepen.io/anon/pen/PNMBQx

希望有所帮助，祝你好运！