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

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 来向右浮动元素

Answer 2

这是因为媒体查询，所以在较小的屏幕上它会改变样式。只需添加这些：

 .navbar-nav {
    float: right;
    margin: 0;
  }
  .navbar-nav > li {
    float: right;
  }

Answer 3

添加下面的 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>

Answer 4

.pull-right{
  float:right;
  }
#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)
{

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