强制Navbar元素保持在一行中

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>

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

而不是这样：

Answer 1

只需将display: inline-block;添加到li，它们就会以内嵌方式显示。

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

此外，如果您想在同一行显示ul，您可以对ul元素执行相同的操作。这两个ul都有jsfiddle内联。

同样在firefox中你会有一个768px的断点，所以你应该删除white-space:nowrap

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

P.s：我不知道它是不是TYPO，但你应该使用.pull-right代替.navbar-right向右浮动一个元素

Answer 2

由于媒体查询，所以在较小的屏幕上它会改变风格。只需添加以下内容：

get_contents

Answer 3

＆＃13;

＆＃13;

.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)
{

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;