文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的引导v5卡在垂直窗口上移动调整大小？

问为什么我的引导v5卡在垂直窗口上移动调整大小？
EN

Stack Overflow用户

提问于 2021-07-18 20:27:56

回答 1查看 94关注 0票数 0

问题：

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

代码：

卡元

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

图像：

重叠卡

overlap

bootstrap-5

bootstrap-cards

html

css

回答 1

Stack Overflow用户

发布于 2021-07-18 21:31:09

如果您需要这样的代码，您可以通过给页脚上的页边距和卡片上的页边距来运行这段代码：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68432847

复制

相似问题

问为什么我的引导v5卡在垂直窗口上移动调整大小？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的引导v5卡在垂直窗口上移动调整大小？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的引导v5卡在垂直窗口上移动调整大小？
EN