html - 尽管右侧有足够的空间，Navbar仍会向下滚动到第二行

我正在使用Bootstrap 3.3.0，尽管右侧有足够的空间来容纳其他物品，但导航栏仍会向下滚动到第二行。如果我减小字体大小，它只会缩小大小，但仍然保持包裹状态。如何将其保持一行？

图片：http://i59.tinypic.com/16knkvo.png

这是代码：

.navbar{
  height: 25%;
  background-color: #FCE218;
  border-radius: 0px;
}

.navbar-header,.nav,.navbar-nav,.navbar-brand{
  height: 100%;

}

.nav-margin{
  padding-top: 2%;
}

.nav-link-font{
  color: #FF4325;
}

.nav-link-active-font{
  font-weight: bold;
  color: #18740B;
}

.nav-link-font,.nav-link-active-font{
  font-family: 'Indie Flower', cursive;
  font-size: 150%;
  text-align: center;
  border: solid;
  border-color: #0B2D13;
  border-width: 1px;
  width: 100%;
}

.nav-item{
  margin-right: 2%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav class="container-fluid navbar" role="navigation">

  <div class="navbar-header">
    <a class="navbar-brand" href="#">
          <img class="img-responsive" src="images/HeaderImg.png" alt="Aamantran - Alphonso Mangoes" />
    </a>
  </div>
  <div class="nav-margin">
    <ul class="nav navbar-nav">
      <li class="active nav-item"><a class="nav-link-active-font" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link-font" href="#">Why Aamantran?</a></li>
      <li class="nav-item"><a class="nav-link-font" href="#">Quality Assurance</a></li>
      <li class="nav-item"><a class="nav-link-font" href="#">Recipes</a></li>
      <li class="nav-item"><a class="nav-link-font" href="#">Contact Us</a></li>
    </ul>
  </div>

</nav>

最佳答案

问题是您要应用于margin-right类的nav-item。您使用的是百分比而不是绝对值。将其更改为此，它将停止换行：

.nav-item{
  margin-right: 10px;
}

关于html - 尽管右侧有足够的空间，Navbar仍会向下滚动到第二行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26970833/