如何消除Flask Jinja2渲染的card deck中卡片间的多余间距？

看起来你遇到的问题是Bootstrap的card-deck和网格列(col-sm-4)布局冲突导致的多余间距——这俩组件的布局逻辑是重叠的，一起用就会叠加出额外的padding或margin。我给你两个常用的解决方案，你可以根据需求选：

方案1：用网格系统替代card-deck（推荐） #

移除card-deck容器，直接用Bootstrap的网格系统布局，通过row的g-0类消除列之间的默认间距，同时给卡片加h-100让它们保持等高（和原card-deck的效果一致）：

<div class="container-fluid">
  <div class="row g-0"> <!-- g-0 移除列之间的 gutter 间距，如需少量间距可换成g-1/g-2 -->
    {% for l in list %}
    <div class="col-sm-4">
      <div class="card h-100"> <!-- h-100 确保所有卡片高度一致 -->
        <div class="card-body">
          {{ l[0] }} {{ l[4] }}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

方案2：保留card-deck，调整卡片宽度 #

如果你想继续用card-deck，那得去掉col-sm-4（它会给卡片加额外的padding），然后通过CSS或Bootstrap的工具类控制卡片的宽度：

方法A：用Bootstrap工具类 #

<div class="container-fluid">
  <div class="row">
    <div class="card-deck">
      {% for l in list %}
      <div class="card flex-sm-fill w-sm-33"> <!-- flex-sm-fill 适配响应式，w-sm-33 设置宽度为1/3 -->
        <div class="card-body">
          {{ l[0] }} {{ l[4] }}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

方法B：自定义CSS控制宽度 #

先加一段CSS：

.card-deck .card {
  flex: 0 0 33.3333%; /* 强制卡片宽度为父容器的1/3 */
  max-width: 33.3333%;
}

然后修改HTML：

<div class="container-fluid">
  <div class="row">
    <div class="card-deck">
      {% for l in list %}
      <div class="card">
        <div class="card-body">
          {{ l[0] }} {{ l[4] }}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

核心原因就是card-deck本身会给卡片添加横向margin，而col-sm-4自带左右padding，两者叠加就产生了多余的间距。选其中一种布局逻辑（网格或card-deck）就能解决问题啦。

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