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

Question

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

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

这是我的代码:

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

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

而不是这样:

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

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