我希望我的Bootstrap导航栏的元素在任何宽度下都能保持一行。
我知道这个问题已经被问过很多次,我尝试了各种解决方案,但对于我的情况都没有奏效。
这是我的代码:
#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>
我希望我的导航条在小屏幕上看起来像这样: