twitter-bootstrap 强制导航栏元素保持在一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39266989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force Navbar elements to stay in one line
提问by matthiasunt
I wan't the elements of my Bootstrap Navbarto stay in one lineat every width.
我wan't我的元素引导导航栏，以留在一条线在每一个宽度。
I know this question has already been asked several timesand I've tried various solutions, but no one worked for my case.
我知道这个问题已经被问过好几次了，我尝试了各种解决方案，但没有人为我的案例工作。
Here's my code:
这是我的代码：
#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>I want my Navbar to look like this on a smaller screen:
我希望我的导航栏在较小的屏幕上看起来像这样：
and not like this:
而不是这样：
回答by Edison Biba
Just add display: inline-block;to your liand they will be displayed inline.
只需添加display: inline-block;到您的li，它们就会内联显示。
.nav>li {
display: inline-block;
}
Also if you want to display both ulin the same line you can do the same thing to the ulelements.Here you have a jsfiddlefor both ulinline.
此外，如果您想ul在同一行中显示两者，您可以对ul元素执行相同的操作。在这里，您有两个内联的jsfiddleul。
Also in firefox you will have a breakpoint in 768px so you should remove the white-space:nowrap
同样在 Firefox 中，您将在 768px 中有一个断点，因此您应该删除 white-space:nowrap
#head-navbar {
white-space: normal;
}
P.s : i don't know if it is a TYPO but you should use .pull-rightinstead of .navbar-rightto float right an element
Ps：我不知道它是否是 TYPO，但您应该使用.pull-right而不是.navbar-right将元素向右浮动
回答by Dennis Novac
It's because of media queries, so on smaller screens it changes the style. Just add these:
这是因为媒体查询，所以在较小的屏幕上它会改变样式。只需添加这些：
.navbar-nav {
float: right;
margin: 0;
}
.navbar-nav > li {
float: right;
}
回答by Dennis Novac
.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>回答by Shahil M
Add the below css, This should work for you.
添加以下 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>