等宽列表 child & break the line

Question

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

喜欢：

|项目 1| |项目2| |项目 3|

|项目 4| |项目5| |项目 6|

当屏幕变小时，它会生成一个 stack/collapse，每行一个项目（与 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% 宽度计算的，子项仍然不相等。第二个问题 - 不知道如何让它在第三个元素（大屏幕时）和每个元素（小屏幕时）之后可折叠。项目基于 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>

等宽列表 child & break the line

Equal width list child & break the line

css

html-table

twitter-bootstrap

responsive