Flask中Bootstrap卡片网格布局异常问题求助

你的问题根源出在两个地方：错误的定位样式和不规范的Bootstrap网格使用，按下面的步骤改就能解决：

1. 删掉致命的定位样式 #

你给卡片加了bottom: -22pc; left: -18pc;这种绝对定位样式，直接把所有卡片都往左上角偏移，导致视觉上看起来像是每3张就换行，而且间距完全乱掉。必须把这两个属性从卡片的style里删掉。

2. 规范Bootstrap网格布局 #

Bootstrap的网格系统需要row包裹col，每个col要指定宽度类（比如col-md-4，表示中等屏幕及以上每行显示3张卡片），否则默认的col会自动均分宽度，当内容宽度超过容器时就会异常换行。

3. 修正重复ID问题 #

多个卡片用了同一个id='cardPostPost'，HTML里id必须唯一，改成class='cardPostPost'。

4. 统一样式并添加间距 #

把重复的内联样式提取到CSS类里，同时用Bootstrap的mb-4类给卡片添加底部间距，解决垂直间距异常的问题。

修改后的完整代码示例 #

Flask模板部分（循环渲染） #

<div class="container my-4">
  <div class="row g-4"> <!-- g-4控制列之间的水平间距 -->
    {% for item in items %} <!-- 替换成你的循环变量 -->
    <div class="col-md-4"> <!-- 中等屏幕每行3张，小屏幕自动堆叠 -->
      <div class="card cardPostPost mb-4">
        <h5 class="card-header border-bottom border-light">
          {{ item.title }} <!-- 替换成你的数据字段 -->
        </h5>
        <div class="card-body">
          <h5 class="card-title">{{ item.card_title }}</h5>
          <p class="card-text">{{ item.text }}</p>
          <a href="#" class="btn btn-primary">Learn More</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

CSS部分（放在<style>标签或外部CSS文件） #

.cardPostPost {
  width: 100%; /* 让卡片自适应列宽，适配不同屏幕 */
  border-radius: 23px;
  background-color: rgb(35, 33, 33);
  color: white;
}
.cardPostPost .card-header {
  color: white;
}
.cardPostPost .card-body {
  color: white;
}

这样修改后，卡片会按Bootstrap的网格规则正常排列，每行3张（中等屏幕及以上），小屏幕自动堆叠，垂直和水平间距也会正常显示。

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