Bootstrap CSS-導航欄列表從新行開始換行。 怎么做 <ul> 從當前行開始換行？

Question

我正在嘗試解決以下問題：我的<ul>列表在小型顯示器上無法正確包裝/折斷。 我的導航欄顯示“測試工具”， 然后顯示 <ul> 。 但是，在小型顯示器上，它只會在一行上顯示“測試工具”，然后將整個<ul>放在下一行。 然后<ul>包裝到它下面的另一行上（共3行）。

當前行為

LINE 0: "Test Tools"
LINE 1: <ul> line one
LINE 2: <ul> continues on third line

期望的行為

LINE 0: "Test Tools" <ul> line one
LINE 1: <ul> continues on second line

問題

這是我的導航欄在合適的寬度（不包裹）下的樣子：

當您將窗口調整為較小的大小時，環繞效果不理想。 它僅在整行上單獨顯示“測試工具” ：

然后，您可以使用右側的滾動條向下一行查看按鈕列表：

我想要的是 ：我想要顯示“測試工具”，然后在同一行上，接下來要出現盡可能多的按鈕 （類似於第一個圖像）。 任何不合適的按鈕都應顯示在下一行（使用右側的滾動條可以看到）。

碼

小提琴-https: //jsfiddle.net/ksissons/Leh7r53m/18/

 .toolsBar .navbar-default { margin-bottom: 0px; border-color: #e7e7e7; border-radius: 4px; position: relative; min-height: 40px; height: 40px; line-height: 1.42857143; color: #333; overflow: overlay; } .toolsBar .navbar .nav { position: relative; left: 0; display: list-item; float: left; } .navbar .nav { position: relative; left: 0; display: block; float: left; margin: 0 10px 0 0; } .toolsBar .navbar-brand { float: left; height: 40px; padding: 0px 12px; font-size: 16px; line-height: 40px; } #toolBarList { overflow: overlay; } .toolsBar .navbar-brand { position: relative; z-index: 2; } .toolsBar .navbar-default .navbar-brand { color: white; } #toolsBar .navbar-default { background-color: #566b7f; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid toolsBar" id="toolsBar"> <div class="navbar navbar-default"> <div class="navbar-header"> <span class="navbar-brand">Test Tools</span> </div> <div> <ul class="nav navbar-nav" id="toolBarList"> <li> <a class="btn btn-default btn-outline btn-circle">Test Readiness Status</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Run Detective Tool</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Go to Confluence</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">How to Update mp3 Files</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Generate &amp; View Report</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Show Configuration Variables</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Edit Configuration Variables</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Update Content Automatically</a> </li> </ul> </div> </div> </div> 

Answer 1

您可以將.navbar-header放入導航列表嗎？

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid toolsBar" id="toolsBar"> <div class="navbar navbar-default"> <ul class="nav navbar-nav" id="toolBarList" style="overflow: overlay;"> <li> <div class="navbar-header"> <span class="navbar-brand">Test Tools</span> </div> </li> <li> <a class="btn btn-default btn-outline btn-circle">Test Readiness Status</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Run Detective Tool</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Go to Confluence</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">How to Update mp3 Files</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Generate &amp; View Report</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Show Configuration Variables</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Edit Configuration Variables</a> </li> <li> <a class="btn btn-default btn-outline btn-circle">Update Content Automatically</a> </li> </ul> </div> </div>