代码之家 › 专栏 › 技术社区 › Katie

引导CSS-navbar列表换行开始。如何使<ul>从当前行开始换行?

twitter-bootstrap-3 twitter-bootstrap html5 css html

Katie · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

ksav 7 年前

你能把你的手放好吗 .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>