Flask中Bootstrap卡片换行后对齐异常问题求助

常见修复方案 #

1. 规范Bootstrap栅格嵌套结构 #

Bootstrap栅格要求row作为容器包裹所有col，且每个卡片需放在col内部。同时利用Bootstrap 5的g-*类统一控制列的横向/垂直间隙，避免手动调整的混乱：

<div class="container mt-4">
  <div class="row g-4"> <!-- g-4控制列之间的间距，包含垂直方向 -->
    {% for item in items %}
      <div class="col-md-4"> <!-- 根据需求设置响应式列宽，例：md屏幕下每行3张卡片 -->
        <div class="card h-100"> <!-- h-100强制卡片高度一致，避免排版错位 -->
          <div class="card-body">
            <h5 class="card-title">{{ item.title }}</h5>
            <p class="card-text">{{ item.content }}</p>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

2. 手动添加卡片垂直间距 #

如果使用Bootstrap 4.x或g-*类不生效，直接给卡片添加mb-*类设置底部外边距：

<div class="card mb-4 h-100"> <!-- mb-4设置卡片底部间距为4个单位 -->
  <!-- 卡片内容 -->
</div>

3. 排查自定义CSS冲突 #

检查自己编写的CSS是否覆盖了Bootstrap默认的间距样式，比如以下错误写法会清空卡片底部间距：

/* 需删除或修改这类代码 */
.card {
  margin-bottom: 0 !important;
}

4. 避免错误的行结构 #

禁止在循环内重复创建row，以下错误写法会导致每个卡片单独占一行，自然无垂直间距：

<!-- 错误示例，请勿使用 -->
{% for item in items %}
<div class="row">
  <div class="col-md-4">
    <div class="card">...</div>
  </div>
</div>
{% endfor %}

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