html - bootstrap col-sm-3 列不会转到第二行

Question

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

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

Answer 1

您可以使用 flexbox 使线条很好地环绕。

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

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

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

example here