基于Bootstrap3.3.7实现等宽列表项及响应式换行需求

嘿，我来帮你搞定这个响应式导航的问题～先看看你当前代码的核心问题，再给你两个靠谱的解决方案：

问题根源分析 #

1. 列表项不等宽：你用了display: table-cell，但calc(100%/3)没有考虑border-spacing: 10px的额外宽度，导致总宽度超出容器，浏览器会自动挤压单元格宽度，再加上table-cell默认会根据内容分配宽度，自然就不等宽了。
2. 无法控制换行：table布局是基于行的，没法直接让第3个列表项自动换行到下一行，手动加<tr>又完全失去了响应式的灵活性。

解决方案1：用Flexbox实现（推荐，更灵活） #

Flexbox天生适合这种响应式流式布局，代码简洁且易维护，完全适配你的需求：

完整代码 #

HTML（保持你原来的结构即可）

<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

/* 重置list-group默认样式，避免冲突 */
.courses-types.list-group {
  padding: 0;
  margin: 0;
  width: 100%;
  background: pink;
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 替代border-spacing，直接控制列表项间距 */
  list-style-type: none;
}

.courses-types.list-group .list-group-item {
  /* 大屏时：总宽度减去两个间距（10px*2）后均分3份 */
  flex: 0 0 calc((100% - 20px)/3);
  background: #cecece;
  padding: 1em;
  text-align: center;
  border: none;
  border-radius: 0; /* 不需要圆角可以去掉 */
}

/* 小屏断点（Bootstrap3的xs断点，768px以下） */
@media (max-width: 767px) {
  .courses-types.list-group .list-group-item {
    flex: 0 0 100%; /* 占满整行，自动堆叠 */
  }
}

为什么好用？ #

• flex-wrap: wrap自动处理换行，不用手动控制第3个元素；
• gap属性直观控制间距，比border-spacing更灵活；
• 宽度计算精准，确保大屏下3个列表项完全等宽。

解决方案2：利用Bootstrap3栅格系统（贴合你的技术栈） #

如果你更习惯用Bootstrap自带的类，直接借助它的栅格就能实现，不用写太多自定义CSS：

完整代码 #

HTML（调整列表项的类）

<div class="container">
 <div class="row">
  <div class="col">
   <!-- 给ul加row类，每个li加col-md-4类 -->
   <ul class="courses-types list-group row">
    <li class="list-group-item col-md-4">item 1</li>
    <li class="list-group-item col-md-4">item 2</li>
    <li class="list-group-item col-md-4">item 3</li>
    <li class="list-group-item col-md-4">item 4</li>
    <li class="list-group-item col-md-4">item 5</li>
    <li class="list-group-item col-md-4">item 6</li>
   </ul>
  </div>
 </div>
</div>

CSS

.courses-types.list-group {
  padding: 0;
  margin: 0 -10px; /* 抵消col的默认padding，配合内部margin控制间距 */
  list-style-type: none;
}

.courses-types.list-group .list-group-item {
  background: #cecece;
  text-align: center;
  border: none;
  margin: 0 10px 10px; /* 控制左右和底部间距 */
  padding: 1em;
}

/* 给外层加粉色背景 */
.col .courses-types-container {
  background: pink;
  padding: 10px;
}

为什么好用？ #

• 完全利用Bootstrap3的栅格规则：col-md-4在≥992px时每行3个，小屏自动堆叠成每行1个；
• 借助框架自带的响应式断点，不用自己写媒体查询。

内容的提问来源于stack exchange，提问作者Paweł Skaba