要在水平方向没有空间时使您的卡片垂直对齐，并确保即使添加另一张卡片时站点仍保持原位，您可以使用Bootstrap的flexbox实用程序沿着适当的HTML结构。下面是一个示例：
HTML：

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Card 1 -->
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Card 2 -->
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Card 3 -->
    </div>
    <!-- Add more cards as needed -->
  </div>
</div>

CSS（Bootstrap flexbox实用程序）：

.row.g-3 {
  display: flex;
  flex-wrap: wrap;
}