bootstrap col-sm-3 列没有进入第二行答案

【问题标题】：bootstrap col-sm-3 column doesn't go to second rowbootstrap col-sm-3 列没有进入第二行
【发布时间】：2017-07-14 17:38:38
【问题描述】：

我正在尝试组织菜单列表。代码如下所示。我的问题是第五列不会进入第二行。它与另一列空白相连：

<div class="container">
  <div class="row">
    <ul>
      <li class="col-sm-3" style="background:grey; text-align:center"><a>1</a>
        <ul style="background:#ddd;">
          <li><a>2</a></li>
          <li><a>2</a></li>
          <li><a>2</a></li>
        </ul>
      </li>
      <li class="col-sm-3" style="background:grey; text-align:center"><a>2</a>
        <ul>
          <li><a>2</a></li>
          <li><a>2</a></li>
          <li><a>2</a></li>
        </ul>
      </li>
      <li class="col-sm-3" style="background:grey; text-align:center"><a>3</a>
      </li>
      <li class="col-sm-3" style="background:grey; text-align:center"><a>4</a>
        <ul>
          <li><a>2</a></li>
        </ul>
      </li>
      <li class="col-sm-3" style="background:grey; text-align:center"><a>5</a></li>
    </ul>
  </div>
</div>

图片：

如何将 5 带到第二排？是不是一定要再写一个div class="row ?

【问题讨论】：

把它放在第二个带有类行的 div 中？
我试图避免 div 类行。因为，我将在一个 python 模板中实现它，其中菜单项将来自一个循环。有什么办法可以避免使用行类创建新的 div？

标签： html css twitter-bootstrap-3

【解决方案1】：

您可以使用 flexbox 使线条很好地换行。

将属性 display:flex, flex-wrap:wrap 添加到顶层 ul

.container > .row > ul {
    flex-wrap: wrap;
    display: flex;
}

然后你可能需要解决你的风格

example here

【讨论】：

【解决方案2】：

您需要使用 class="row" 来创建新行

<div class="row">
</div>

【讨论】：

是的，我可以。但我试图避免这种情况。

【解决方案3】：

如果您只想显示新行中的第 5 个选项，请遵循此 css。

li.col-sm-3:nth-child(5) {
    clear: both;
}

确保此 css 仅适用于第 5 个元素。

【讨论】：

其实我不知道我会有多少li项目。我可以是五岁或十四岁或任何数字。我从hairmot那里得到了答案。