强制Navbar元素保持在一行中

Question

我wan't我的元素引导导航栏,以留在一条线在每一个宽度.

我知道这个问题已经被多次询问了,我已经尝试了各种解决方案,但没有人为我的情况工作.

这是我的代码:

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

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

而不是这样的:

Answer 1

只需添加display: inline-block;到您的内容li,它们将以内嵌方式显示.

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

此外,如果你想同时显示ul在同一行,你可以做同样的事情到ulelements.Here你有一个的jsfiddle两个ul内嵌.

另外在firefox中你将有一个768px的断点,所以你应该删除 white-space:nowrap

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

Ps:我不知道它是不是一个TYPO,但你应该使用.pull-right而不是.navbar-right浮动一个元素