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

问题

这是我的导航栏在适当宽度(无环绕)时的样子:

当您将窗口的大小调整得更小时，环绕效果不如预期。 它只在一整行上单独显示“测试工具”:

然后你可以使用右边的滚动条往下一行看按钮列表:

我想要的:我希望显示“测试工具”，然后尽可能多的按钮应该出现在同一行上(类似于第一张图片) .任何不适合的按钮都应显示在下一行(使用右侧的滚动条可见)。

代码

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

你能把你的 .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>