为什么我的 bootstrap v5 卡会在垂直窗口调整大小时移动？

问题描述

问题：

我目前正在一个网站上工作并尽我最大的努力使用/学习引导程序并希望实现例如3张牌。但是一旦我垂直调整窗口大小，我的所有元素都会向上移动，这有点破坏了网站的外观，因为它们与其他元素重叠。我认为问题可能出在我的 flex 元素上，但我不知道如何让它以任何其他方式工作。

---

代码：

卡片元素

    <section class="row container-fluid h-75 justify-content-evenly align-items-center">
        <div class="col-md-3">
            <div class="card text-white bg-dark p-4">
                <div class="card-body">
                    <h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis,natus?
                    </p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>

                                +2 identical cards

    </section>

例如我的页脚

    <footer class="container-fluid text-center py-5 text-white bg-dark">
        <h1 class="pb-5">Partners:</h1>
        <div class="d-lg-flex justify-content-evenly pb-5">
            <img class="img-fluid w-25" src=".." alt="">
            <img class="img-fluid w-25" src=".." alt="">
        </div>
    </footer>

图片：

Overlapping card

解决方法

您可以通过在页脚和卡片上设置边距顶部来使其工作， 尝试运行此代码，如果您需要像这样：

<section class="row container-fluid h-75 justify-content-evenly mx-auto align-items-center">
  <div class="mb-3 col-12 col-md-3">
    <div class="card text-white bg-dark p-4">
      <div class="card-body">
        <h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
        <p class="card-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Perspiciatis,natus?
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>

         +2 more identical cards
</section>

带有 mt-5 的页脚

<footer class="container-fluid text-center py-5 mt-5 text-white bg-dark">
  <h1 class="pb-5">Partners:</h1>
  <div class="d-lg-flex justify-content-evenly pb-5">
    <img class="img-fluid w-25" src=".." alt="" />
    <img class="img-fluid w-25" src=".." alt="" />
  </div>
</footer>