Bootstrap 5：将卡片垂直对齐到另一张卡片

Question

我一直在使用 Bootstrap 5 和 vue 3 构建响应式卡片集合。使用 container 和 row 类，我可以使卡片在同一级别对齐。但是，为了将时间戳 (card-footer) 附加到底部，我还在卡片类中使用了 h-100。时间戳按预期呈现，但如果内容发生变化，每行之间会有一个间隙，如下图所示。

我想让卡片垂直对齐以在卡片之间具有相同的间隙。

有没有办法用 Bootstrap 做垂直对齐？

这是现在的部分代码（使用 vue3）：

<div class="container">
    <div class="row justify-content-center">
      <div class="card h-100 shadow-sm mt-3 mx-1" v-for="(newsPiece, index) in newsCollection" :key="index">
        <!-- image can toggle description -->
        <img :src="newsPiece.urlToImage" alt="image link lost" data-bs-toggle="collapse"
          :data-bs-target="'#collapseImage'+index">
        <!-- title -->
        <h5><a :href="newsPiece.url" target="_blank">{{ newsPiece.title }}</a></h5>
        <!-- toggle content from image -->
        <div class="collapse" :id="'collapseImage'+index">
          <div class="card-body-noborder">
            <!-- {{ newsPiece.description }} -->
            <span v-html="newsPiece.description"></span>
          </div>
        </div>
        <div class="card-footer">
          {{ newsPiece.publishedAt.replace('T',' ').replace('Z','') }}
        </div>
      </div>
    </div>
  </div>

Answer 1

作为 explained here，您正在寻找“砌体”布局。 recommended method for Bootstrap 5 是使用 Masonry JS 插件。