Bootstrap布局问题：col与col-3类无法实现7列等宽及响应式换行

我来帮你搞定这个列布局的坑～首先得搞清楚你现在的问题出在哪：

你用的col-3是Bootstrap里全局生效的固定网格类，它会让每个列占1/4的宽度（3/12网格）。一行总共12份网格，4个col-3就刚好占满，所以第5个列自然就换行了——这就是为什么桌面端直接分成两行的原因。

你的需求是「桌面端7个列等宽排列，响应式缩小后变成4+3两行」，那我们需要针对性调整列的宽度规则，分方案给你解决：

方案一：自定义CSS+响应式列类（推荐，直观易维护） #

1. 添加自定义CSS规则 #

先写一段媒体查询，给大屏幕下的列设置7等分宽度：

/* 针对大屏幕（比如≥1200px，可根据你的需求调整断点） */
@media (min-width: 1200px) {
  .col-7equal {
    flex: 0 0 calc(100% / 7);
    max-width: calc(100% / 7);
  }
}

2. 修改HTML代码 #

把原来的col-3换成响应式列类，再加上我们自定义的col-7equal：

<div class="row mt-20 g-3">
  <div class="col-sm-3 col-7equal">
    <img src="assets/img/cegh.png" width="80%">
  </div>
  <div class="col-sm-3 col-7equal">
    <img src="assets/img/usp.png" width="80%">
  </div>
  <div class="col-sm-3 col-7equal">
    <img src="assets/img/butanta.png" width="80%">
  </div>
  <div class="col-sm-3 col-7equal">
    <img src="assets/img/fapesp.png" width="80%">
  </div>
  <div class="col-sm-3 col-7equal mb-sm-0 mb-5">
    <img src="assets/img/inct.png" width="80%">
  </div>
  <div class="col-sm-3 col-7equal">
    <img src="assets/img/analitica.png" width="80%">
  </div>
  <div class="col-sm-3 col-7equal">
    <img src="assets/img/abcam.png" width="80%">
  </div>
</div>

代码细节解释 #

• col-sm-3：当屏幕宽度≥576px（Bootstrap默认sm断点）时，每个列占25%宽度，4个刚好填满一行，剩下3个自动换行，完美实现你要的「响应式4+3」效果。
• col-7equal：在大屏幕（≥1200px）时，每个列占100%/7的宽度，7个列等分排列在一行。
• g-3：给列之间添加间距，让布局更透气（你可以改成g-2、g-4等调整间距大小）。
• mb-sm-0 mb-5：小屏幕下给第5个列保留底部间距，大屏幕下自动移除，避免多余空白。

方案二：纯Bootstrap flex布局（无需自定义CSS） #

如果你不想写额外CSS，可以利用Bootstrap的flex工具类实现：

<div class="row mt-20 g-3">
  <div class="col flex-grow-1 flex-sm-shrink-0 flex-sm-basis-25">
    <img src="assets/img/cegh.png" width="80%">
  </div>
  <div class="col flex-grow-1 flex-sm-shrink-0 flex-sm-basis-25">
    <img src="assets/img/usp.png" width="80%">
  </div>
  <div class="col flex-grow-1 flex-sm-shrink-0 flex-sm-basis-25">
    <img src="assets/img/butanta.png" width="80%">
  </div>
  <div class="col flex-grow-1 flex-sm-shrink-0 flex-sm-basis-25">
    <img src="assets/img/fapesp.png" width="80%">
  </div>
  <div class="col flex-grow-1 flex-sm-shrink-0 flex-sm-basis-25 mb-sm-0 mb-5">
    <img src="assets/img/inct.png" width="80%">
  </div>
  <div class="col flex-grow-1 flex-sm-shrink-0 flex-sm-basis-25">
    <img src="assets/img/analitica.png" width="80%">
  </div>
  <div class="col flex-grow-1 flex-sm-shrink-0 flex-sm-basis-25">
    <img src="assets/img/abcam.png" width="80%">
  </div>
</div>

• flex-grow-1：让桌面端的列自动等分剩余空间，实现7列等宽。
• flex-sm-shrink-0 flex-sm-basis-25：在小屏幕下固定列宽为25%，强制4个一行。

内容的提问来源于stack exchange，提问作者lufizi