Bootstrap自动网格适配问题：PC与移动端布局不符求助

问题根源 #

1. Bootstrap 5 类名变更：最新版Bootstrap已移除col-xs-*类，针对<576px的移动端断点，直接使用col-*即可。
2. 布局逻辑错误：你当前给每个元素加col-6的写法，会让移动端每行显示2个元素，最终呈现2+2+2+1的4行布局，无法实现4个和3个元素分两列的需求。

方案1：嵌套网格（Bootstrap原生类实现） #

通过Bootstrap的响应式显示类和嵌套网格，分别控制PC端和移动端的布局结构：

<div class="row gx-3 gy-3">
  <!-- PC端布局：≥576px时显示，一行7列 -->
  <div class="d-none d-sm-flex w-100">
    <div class="col">
      <div class="bg-dark ratio ratio-1x1"></div>
    </div>
    <div class="col">
      <div class="bg-dark ratio ratio-1x1"></div>
    </div>
    <div class="col">
      <div class="bg-dark ratio ratio-1x1"></div>
    </div>
    <div class="col">
      <div class="bg-dark ratio ratio-1x1"></div>
    </div>
    <div class="col">
      <div class="bg-dark ratio ratio-1x1"></div>
    </div>
    <div class="col">
      <div class="bg-dark ratio ratio-1x1"></div>
    </div>
    <div class="col">
      <div class="bg-dark ratio ratio-1x1"></div>
    </div>
  </div>

  <!-- 移动端布局：<576px时显示，两列分组 -->
  <div class="d-flex d-sm-none w-100">
    <div class="col-6">
      <div class="row gy-3">
        <div class="col-12">
          <div class="bg-dark ratio ratio-1x1"></div>
        </div>
        <div class="col-12">
          <div class="bg-dark ratio ratio-1x1"></div>
        </div>
        <div class="col-12">
          <div class="bg-dark ratio ratio-1x1"></div>
        </div>
        <div class="col-12">
          <div class="bg-dark ratio ratio-1x1"></div>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="row gy-3">
        <div class="col-12">
          <div class="bg-dark ratio ratio-1x1"></div>
        </div>
        <div class="col-12">
          <div class="bg-dark ratio ratio-1x1"></div>
        </div>
        <div class="col-12">
          <div class="bg-dark ratio ratio-1x1"></div>
        </div>
      </div>
    </div>
  </div>
</div>

关键说明：

• d-none d-sm-flex：隐藏移动端布局，在≥576px（sm断点）时显示PC端的7列布局。
• d-flex d-sm-none：显示移动端布局，在≥576px时隐藏。
• 移动端通过两个col-6平分宽度，内部嵌套row让元素垂直排列，实现4个和3个元素的分组。

方案2：CSS Grid 自定义布局（无重复DOM元素） #

如果不想重复元素，可以用CSS Grid结合Bootstrap断点实现：

<div class="row gx-3 gy-3 week-layout">
  <div class="col">
    <div class="bg-dark ratio ratio-1x1"></div>
  </div>
  <div class="col">
    <div class="bg-dark ratio ratio-1x1"></div>
  </div>
  <div class="col">
    <div class="bg-dark ratio ratio-1x1"></div>
  </div>
  <div class="col">
    <div class="bg-dark ratio ratio-1x1"></div>
  </div>
  <div class="col">
    <div class="bg-dark ratio ratio-1x1"></div>
  </div>
  <div class="col">
    <div class="bg-dark ratio ratio-1x1"></div>
  </div>
  <div class="col">
    <div class="bg-dark ratio ratio-1x1"></div>
  </div>
</div>

<style>
/* 移动端断点：<576px */
@media (max-width: 575.98px) {
  .week-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1rem; /* 对应Bootstrap的gx-3/gy-3间距 */
  }
  /* 前4个元素放入第一列 */
  .week-layout .col:nth-child(1),
  .week-layout .col:nth-child(2),
  .week-layout .col:nth-child(3),
  .week-layout .col:nth-child(4) {
    grid-column: 1;
  }
  /* 后3个元素放入第二列 */
  .week-layout .col:nth-child(5),
  .week-layout .col:nth-child(6),
  .week-layout .col:nth-child(7) {
    grid-column: 2;
  }
}
</style>

关键说明：

• PC端依赖Bootstrap的row和col自动实现7列均分。
• 移动端通过CSS Grid强制将容器分为两列，指定元素的列位置，实现4个和3个元素的分组布局。

内容的提问来源于stack exchange，提问作者P. Jerome