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>