Question

我正在使用Bootstrap 3.3.0并且我的导航栏包裹到第二行，尽管右侧有足够的空间来容纳另一个项目。如果我减小字体大小，它只会缩小尺寸但仍保持包裹状态。我如何将它保持在一行？

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

以下是代码：

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

Answer 2

这里有人发布了一个答案，要求我将导航栏导航宽度设置为100％。好吧，大约60％的人为我工作！他删除了因某些原因我无法猜到的答案。但是谢谢大家的帮助！：）

尽管右侧有足够的空间，导航栏仍会缩小到第二行

2 个答案: