如何在Python Flask中水平定位循环生成的Bootstrap卡片

别用position定位，这会让元素脱离文档流导致重叠，直接用Bootstrap自带的布局类就能实现卡片水平排列且自适应换行，下面给两种可行方案：

方案一：Bootstrap栅格系统（推荐，响应式友好） #

用row和col类构建布局，自动适配不同屏幕尺寸：

<div class="row g-4">
  {% for taskname in tasknames %}
  <div class="col-md-4">
    <div class="card" style="border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
      <h5 class="card-header border-bottom border-light" style="color: white">{{ taskname[0] }}</h5>
      <div class="card-body" style="color: white">
        <h5 class="card-title">{{ taskname[1] }}</h5>
        <p class="card-text">{{ taskname[2] }}</p>
        <a href="#" class="btn btn-primary">Learn More</a>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

• row是Bootstrap的行容器，g-4设置列之间的间距；
• col-md-4表示中等屏幕及以上每行显示3张卡片，小屏幕自动堆叠成单列，可根据需求调整为col-lg-3（每行4张）等；
• 不需要给卡片设置固定width，栅格会自动分配宽度。

方案二：Flex布局（灵活可控） #

用flex容器实现水平排列，自定义卡片宽度：

<div class="d-flex flex-wrap gap-4 p-3">
  {% for taskname in tasknames %}
  <div class="card" style="flex: 0 0 400px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
    <h5 class="card-header border-bottom border-light" style="color: white">{{ taskname[0] }}</h5>
    <div class="card-body" style="color: white">
      <h5 class="card-title">{{ taskname[1] }}</h5>
      <p class="card-text">{{ taskname[2] }}</p>
      <a href="#" class="btn btn-primary">Learn More</a>
    </div>
  </div>
  {% endfor %}
</div>

• d-flex开启flex布局，flex-wrap让卡片空间不足时自动换行；
• gap-4设置卡片间的间距；
• flex: 0 0 400px固定卡片宽度，若想让卡片自适应宽度，可换成flex: 1 1 300px（最小宽度300px，自动填充剩余空间）。

为什么之前的方法失效？ #

直接循环生成的card是块级元素，默认垂直堆叠；用position定位会让元素脱离正常文档流，失去布局上下文，自然会出现重叠问题，这不是正确的布局实现方式。

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