css - Twitter Bootstrap 导航栏元素未按要求对齐

Question

我是 Bootstrap 的新手，正在尝试制作简单的菜单/导航。

我正在尝试使菜单内容与品牌一起居中。此外，当我缩小屏幕时，菜单项会在品牌下移动。我怎样才能让它不发生？导航中似乎有足够的空间，不会让元素移动到下方。

注意:我没有为此编写任何 CSS。

https://jsfiddle.net/b9smvjn0/

HTML:

<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#account-options" 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>
      <h4 class="navbar-brand">Image Box</h4>
    </div><!--end navbar header-->
    <!--togglable menu items-->
    <div class="collapse navbar-collapse" id="account-options">
      <ul class="nav navbar-nav">
        <li><a href="#">Upload Photo</a></li>
        <li><a href="#">Deactivate Account</a></li>
        <li><a href="#">Activate Account</a></li>
        <li><a href="#">Delete Account</a></li>
        <li><a href="#">Log Out</a></li>
      </ul>
    </div><!--end toggle-->
  </div><!--end container-->
</div><!--end navigation-->

Answer 1

我认为这是因为 navbar-header 中的 h4 元素。它在顶部和底部添加了额外的边距，这就是它不对齐的原因。

.navbar-header h4 {margin:0;}

我在你的 fiddle 中删除了它并且它正在工作。 https://jsfiddle.net/b9smvjn0/1/

这是你想要的吗？

编辑

希望这就是您要找的。
注意:这是使用自定义 css，因此如果您打算坚持使用纯 Bootstrap ，您将采用另一种方式。

我在 brand 和 navbar 周围添加了一个 div，这样我们就可以将这两个元素居中。我还减少了导航栏内 a 标签的填充量。这是必要的，因为您有很多菜单项。

然后我就使用了 text-align:center; 的技术； margin:0 auto; 在 container div 上。它位于 media(min-width:768); 中，因为当它变小时布局会发生变化，所以我们将它恢复到原始位置。

这是更新的 fiddle :https://jsfiddle.net/b9smvjn0/3/