当切换时，bootstrap navbar没有按预期对齐

Question

为什么<ul>元素没有正确对齐（主页有效链接应该是，并且切换链接的其余部分应该在品牌下），如图所示。

守则：

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="" class="navbar-brand">Sample Brand</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Social Media</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

在我展示tuturial后，bootrap css存在问题。 按钮有float：right元素，我们需要清除它。

请在您的css文件中添加课程

.clear{
clear:both;
}

然后在此类中使用您的代码

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="" class="navbar-brand">Sample Brand</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse clear">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Social Media</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

在这里小提琴 -

https://jsfiddle.net/05aah0tb/