html - 尽管右侧有足够的空间，但 Navbar 仍回到第二行

Question

我使用的是 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>

Answer 1

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

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