如何解决为什么我的 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>
图片:
解决方法
您可以通过在页脚和卡片上设置边距顶部来使其工作, 尝试运行此代码,如果您需要像这样:
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。