Bootstrap CSS-导航栏列表从新行开始换行。 怎么做 <ul> 从当前行开始换行？

Question

I'm trying to fix an issue where my <ul> list does not wrap / break correctly on small displays. I have my navbar show "Test Tools" then <ul> . However on small displays it will only show "Test Tools" on one line, then put the entire <ul> on the next line. Then the <ul> wraps onto another line below it (3 lines total).

Current Behavior

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

Desired Behavior

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

ISSUE

Here's what my navbar looks like at a good width (no wrapping):

When you resize your window to be smaller, the wrapping works not as expected. It only shows "Test Tools" on one entire line by itself :

Then you can use the scrollbar on the right to go down a line to see the button list:

What I want : I want "Test Tools" to show, then as many buttons as possible should come next on the same line (similar to the first image). Any buttons that don't fit should be shown on the next line (visible by using the scrollbar on the right).

CODE

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

Can you put your .navbar-header in the nav list?

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