css - 等宽列表 child & break the line

Question

我想要实现的是制作一种响应式/流畅的导航，它是盒形的。这意味着我将有 6 个列表元素，在 100% 宽度的情况下，将分成两行，每行有 3 个子元素。

喜欢:

|元素1| |元素2| |元素 3|

|元素4| |元素5| |元素 6|

当屏幕变小时，它会堆叠/折叠，每行一个元素(就像 Bootstrap 列一样。

这是我目前得到的:

<div class="container">

  <div class="row">
    <div class="col">

      <ul class="courses-types list-group">
         <li class="list-group-item">item 1</li>
         <li class="list-group-item">item 2</li>
         <li class="list-group-item">item 3</li>
         <li class="list-group-item">item 4</li>
         <li class="list-group-item">item 5</li>
         <li class="list-group-item">item 6</li>
      </ul>

    </div>
  </div>

</div>

和CSS

.courses-types {
  padding:0;
  width:100%;
  background:pink;
  display:table;
  border-collapse: separate;
  border-spacing: 10px;
}
.courses-types, .courses-types li {
  list-style-type: none;
  list-style-position: inside;
  text-align: center;
}

.courses-types li {
  display:table-cell;
  background:#cecece;
  padding:1em;
  width:calc(100%/3);
  border:0;
}

当前代码几乎没有问题——即使宽度是根据 100% 宽度计算的， child 仍然不相等。第二个问题 - 不知道如何让它在第三个元素(大屏幕时)和每个元素(小屏幕时)之后可折叠。元素基于 bootstrap 3.3.7。

Answer 1

您应该改用 flexbox。这可以为您提供所需的布局。

.list-group {
  	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.list-group-item {
  flex-basis: 33.3333%;
}

<div class="container">

  <div class="row">
    <div class="col">

      <ul class="courses-types list-group">
         <li class="list-group-item">item 1</li>
         <li class="list-group-item">item 2</li>
         <li class="list-group-item">item 3</li>
         <li class="list-group-item">item 4</li>
         <li class="list-group-item">item 5</li>
         <li class="list-group-item">item 6</li>
      </ul>

    </div>
  </div>

</div>