时间戳

首页 > 解决方案 > 为什么我的引导 v5 卡在垂直窗口调整大小时移动？

html - 为什么我的引导 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>

图片：

重叠卡

标签： htmlcssoverlapbootstrap-5bootstrap-cards

解决方案

您可以通过在页脚和卡片上提供页边距来使其工作，如果您需要这样的代码，请尝试运行此代码：

<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>

推荐阅读