我不想將我的元素Bootstrap導航欄改爲停留在每一個寬度的一行。強制導航欄元素停留在一條線上
我知道這個問題已經被要求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>
我希望我的導航欄看起來像這樣一個小屏幕上:
你想同時UL顯示內嵌?因爲用你編輯的問題現在沒問題了 –