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

问题

这是我的导航栏在良好宽度（不包裹）下的样子：

当您将窗口调整为较小尺寸时，环绕效果不理想。 它仅在整行上显示“测试工具” ：

然后，您可以使用右侧的滚动条向下一行查看按钮列表：

我想要的内容：我想显示“测试工具”，然后在同一行上紧接尽可能多的按钮（类似于第一张图片） 。所有不适合的按钮都应显示在下一行（使用右侧的滚动条可以看到）。

CODE

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