Bootstrap 响应式设计问题：如何强制图像停留在 div 的底部？

Question

我正在使用 Bootstrap 的产品示例 (https://getbootstrap.com/docs/5.0/examples/product/) on my website https://trimlog.de/. Everything is working fine except that on my iPad or if I zoom in on my computer the images on the website move. Here you can see what it looks like:

与未放大时在我的计算机上的显示相比：

有谁知道如何强制图像留在底部？

这是我的 HTML:

<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
        <div class="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden" id="boats">
            <div class="my-3 py-3">
                <h2 class="display-5"><i class="fas fa-anchor"></i> Add your boat</h2>
                <p class="lead">We offer presets for many boats and are working on adding your boat to the Trimlog app.
                    In relation to your boat, the boat specific data will be stored.</p>
            </div>
            <div class="bg-light shadow-sm mx-auto" id="boats-bg"></div>
        </div>
        <div class="bg-secondary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden" id="trims">
            <div class="my-3 p-3">
                <h2 class="display-5"><i class="fas fa-wrench"></i> Record trims</h2>
                <p class="lead">During the training you try many different trims in different weather conditions at
                    different locations. Record this data while you're on the water so you'll never forget it.</p>
            </div>
            <div class="bg-dark shadow-sm mx-auto" id="trims-bg"></div>
        </div>
    </div>

    <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
        <div class="bg-warning me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-dark overflow-hidden" id="analytics">
            <div class="my-3 p-3">
                <h2 class="display-5"><i class="fas fa-chart-line"></i> Analyse your trims</h2>
                <p class="lead">If you are about to race, you are probably questioning which trim is the right one. You
                    can look at analysis graphs to see what your experience has shown.</p>
            </div>
            <div class="bg-dark shadow-sm mx-auto" id="analytics-bg"></div>
        </div>
        <div class="bg-primary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden"
             id="calculations">
            <div class="my-3 py-3">
                <h2 class="display-5"><i class="fas fa-calculator"></i> Get an automatically calculated trim</h2>
                <p class="lead">If you are in a hurry, or unsure about the perfect trim even with the informative
                    graphs, the Trimlog app can calculate a trim that fits the location and weather conditions.</p>
            </div>
            <div class="bg-light shadow-sm mx-auto" id="calculations-bg"></div>
        </div>
    </div>

以及样式：

#boats-bg {
    background-image: url("../assets/images/sailing/DSC06987.JPG");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
    height: 300px;
    border-radius: 21px 21px 0 0;
}

#trims-bg {
    bottom: 0;
    background-image: url("../assets/images/sailing/DSC06851.JPG");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
    height: 300px;
    border-radius: 21px 21px 0 0;
}

#analytics-bg {
    bottom: 0;
    background-image: url("../assets/images/sailing/DSC06576.JPG");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
    height: 300px;
    border-radius: 21px 21px 0 0;
}

#calculations-bg {
    bottom: 0;
    background-image: url("../assets/images/sailing/DSC06957.JPG");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
    height: 300px;
    border-radius: 21px 21px 0 0;
}

Answer 1

bootstrap例子貌似也有同样的问题

通过在检查器中对您的站点进行测试，我认为您可以通过为每张卡 div 制作一个 class 来解决这个问题（具有 ID 的 div：船、装饰等...) 和一张 class 用于每张卡片内的图片 div.

假设这张卡片 class 被称为 custom-card 并且卡片中图片的 class 被称为 custom-card-image，那么你可以这样做：

div.custom-card {
    display: flex;
    flex-direction: column;
}

div.custom-card-image {
    flex-grow: 1;
}

这将使每个 custom-card-image 始终位于其各自 custom-card 父级的底部。

display: flex 和 flex-direction: column 使卡片中的项目位于彼此下方。

flex-grow 指定 flex 容器中剩余 space 的多少应分配给项目 (Source)。因为我们给它 1 它占用了所有剩余的 space.

Answer 2

问题

无论内容如何，卡片都具有相同的高度，这使得图片在卡片中的位置不均匀。

解决方案

为所有卡片子项启用 flexbox 上下文，并使图像 margin-top 到 auto 将其粘贴在底部。

添加两个 classes d-flex 和 flex-wrap 到卡片
mt-autoclass到图片

<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
    <div class="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden d-flex flex-wrap" id="boats">
        <div class="my-3 py-3">
            <h2 class="display-5"><i class="fas fa-anchor"></i> Add your boat</h2>
            <p class="lead">We offer presets for many boats and are working on adding your boat to the Trimlog app.
                In relation to your boat, the boat specific data will be stored.</p>
        </div>
        <div class="bg-light shadow-sm mx-auto mt-auto" id="boats-bg"></div>
    </div>
    <div class="bg-secondary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden d-flex flex-wrap" id="trims">
        <div class="my-3 p-3">
            <h2 class="display-5"><i class="fas fa-wrench"></i> Record trims</h2>
            <p class="lead">During the training you try many different trims in different weather conditions at
                different locations. Record this data while you're on the water so you'll never forget it.</p>
        </div>
        <div class="bg-dark shadow-sm mx-auto mt-auto" id="trims-bg"></div>
    </div>
</div>

Bootstrap 响应式设计问题：如何强制图像停留在 div 的底部？

Bootstrap responsive design problem: How to force images to stay at the bottom of a div?

html

css

responsive

bootstrap-5

问题

解决方案