强制导航栏元素保持在一行

Question

我不希望我的 Bootstrap Navbar 的元素在每个宽度上都 保持在一行 中。

我知道这个问题已经被问 过好几次了，我尝试过各种解决方案，但没有人适合我的情况。

这是我的代码：

 #head-navbar {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}
.nav>li {
  display: inline-block;
  white-space: nowrap;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
  <ul class="nav navbar-nav">
    <li><a class="#" href="#">Home</a>
    </li>
    <li><a href="#">Page 1</a>
    </li>
    <li><a href="#">Page 2</a>
    </li>
  </ul>
  <ul class="nav navbar-nav pull-right">
    <li><a href="#">DE</a>
    </li>
    <li><a href="#">IT</a>
    </li>
  </ul>
</nav>

我希望我的导航栏在较小的屏幕上看起来像这样：

而不是这样：

原文由 matthiasunt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需将 display: inline-block; 添加到您的 li 中，它们将内联显示。

 .nav>li {
    display: inline-block;
}

另外，如果你想在同一行中同时显示 ul ，你可以对 ul 元素做同样的事情。这里你有一个 jsfiddle 用于两个 ul .

同样在 firefox 中，你将在 768px 处有一个断点，因此你应该删除 white-space:nowrap

 #head-navbar {
  white-space: normal;
}

Ps ：我不知道它是否是一个 TYPO，但你应该使用 .pull-right 而不是 .navbar-right 来右浮动一个元素

原文由 Edison Biba 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

添加以下 css，这应该适合您。

 #head-navbar {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}
.nav>li {
  display: inline-block;
  width:initial;
  float:left;
  white-space: nowrap;
}
.nav {
  display: inline-block;
}

@media screen and (max-width:768px)
{
  .nav.navbar-nav.pull-right { float:none !important; }
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
  <ul class="nav navbar-nav">
    <li><a class="#" href="#">Home</a>
    </li>
    <li><a href="#">Page 1</a>
    </li>
    <li><a href="#">Page 2</a>
    </li>
  </ul>

  <ul class="nav navbar-nav pull-right">
    <li><a href="#">DE</a>
    </li>
    <li><a href="#">IT</a>
    </li>
  </ul>
</nav>

原文由 Shahil M 发布，翻译遵循 CC BY-SA 3.0 许可协议