移动端Bootstrap卡片无法同行排列？问题排查与方案咨询

问题描述 #

我使用Bootstrap的card-group组件构建了一组卡片，代码如下：

<div class="card-group">
                <div class="justify-content-start p-3">
                    <div class="card bg-light text-center p-0" style="width: 10rem;">
                        <div class="card-header justify-content-right align-middle">
                            <span class="align-middle"><h3> {{ item[1] }} </h3></span>
                        </div>
                        <div class="card-body justify-content-center">
                            <img class="w-50 m-2" style="image-rendering: pixelated;" src="../static/icon.png">
                            <div class="input-group mt-3 w-100">
                                <button type="button" class="btn btn-outline-primary w-75" id="toggleButton">Water</button>
                                <button type="button" class="btn btn-outline-primary w-25" data-bs-toggle="collapse" data-bs-target="#timeCollapse" aria-expanded="false" aria-controls="collapseButton">
                                    <i class="bi bi-three-dots-vertical"></i>
                                </button>
                            </div>
                            <div class="collapse mt-2" id="timeCollapse">
                                <input type="text" class="form-control" aria-label="Time Input Dropdown">
                            </div>
                        </div> 
                    </div>
                </div>
</div>

Chrome桌面端测试时卡片可正常堆叠为多行；但切换到移动端布局/缩小视口后，所有卡片开始单独占据一行。已尝试缩小卡片宽度，但问题依旧。请问：

• 该问题的成因是什么？
• 是否存在类似CSS background-repeat: round 的卡片智能宽度特性？

问题成因 #

• 结构不符合Bootstrap规范：card-group的直接子元素必须是card组件，你额外套了一层<div class="justify-content-start p-3">，破坏了card-group内置的flex布局逻辑，导致弹性属性无法作用到卡片本身。移动端视口下，这层外层容器会撑满一行，卡片自然也跟着独占一行。
• 固定宽度缺乏自适应规则：你给卡片设置了固定width:10rem，但外层容器没有配置flex-wrap或自适应换行规则，当视口宽度不足时，容器无法自动换行，只能让每个卡片单独占据一行。

关于类似background-repeat: round的智能宽度特性 #

Bootstrap官方组件没有直接对应这个特性的功能，但可以通过两种方式实现类似的智能适配效果：

• 自定义Flex布局：给卡片容器设置display: flex; flex-wrap: wrap; gap: 1rem;，给卡片添加flex: 1 1 10rem;（表示卡片最小宽度为10rem，空间充足时自动拉伸填充，空间不足时自动换行），这样卡片会根据容器宽度自动调整每行数量，避免单个卡片占一行的情况。
• Bootstrap网格系统：用row配合响应式col类（比如col-sm-6 col-md-4 col-lg-3）替代card-group，网格系统会自动在不同视口下调整每行的卡片数量，实现自适应布局。

修复示例代码 #

方式1：修正card-group结构 #

<div class="card-group gap-3">
  <div class="card bg-light text-center p-0" style="flex: 1 1 10rem;">
    <div class="card-header justify-content-end align-middle">
      <span class="align-middle"><h3> {{ item[1] }} </h3></span>
    </div>
    <div class="card-body justify-content-center">
      <img class="w-50 m-2" style="image-rendering: pixelated;" src="../static/icon.png">
      <div class="input-group mt-3 w-100">
        <button type="button" class="btn btn-outline-primary w-75" id="toggleButton">Water</button>
        <button type="button" class="btn btn-outline-primary w-25" data-bs-toggle="collapse" data-bs-target="#timeCollapse" aria-expanded="false" aria-controls="timeCollapse">
          <i class="bi bi-three-dots-vertical"></i>
        </button>
      </div>
      <div class="collapse mt-2" id="timeCollapse">
        <input type="text" class="form-control" aria-label="Time Input Dropdown">
      </div>
    </div> 
  </div>
  <!-- 其他卡片重复上述结构 -->
</div>

方式2：使用网格系统实现智能适配 #

<div class="row g-3">
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card bg-light text-center p-0 h-100">
      <!-- 卡片内容保持不变 -->
    </div>
  </div>
  <!-- 其他卡片重复上述结构 -->
</div>

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