等宽列表子和换行

Posted 2023-03-06

【中文标题】等宽列表子和换行

【英文标题】：Equal width list child & break the line

【发布时间】：2020-03-14 18:59:15

【问题描述】：

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

喜欢：

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

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

当屏幕变小时，它会堆叠/折叠，每行一个项目（就像引导列一样。

这是我目前得到的：

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

【问题讨论】：

你不能使用表格布局进行换行，考虑 Flexbox 或 inline-block 甚至浮动

【参考方案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>

【讨论】：

感谢一百万！只需使用专用于移动设备的媒体查询扩展代码即可。