Html 引导响应设计问题：如何强制图像保持在div的底部？

我正在我的网站上使用Bootstrap（）的产品示例。除了在我的iPad上，或者如果我放大我的电脑，网站上的图像就会移动之外，一切都正常。在这里，您可以看到它的外观：

与我的计算机上没有放大的图像相比：

有没有人知道我怎样才能强制图像保持在底部

这是我的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>

---

引导示例似乎也有同样的问题

通过在inspector中对您的站点进行测试，我认为您可以通过为每个卡分区（ID为boats、trims等的分区）创建一个类和为每个卡分区内的图片创建一个类来解决此问题

假设此卡类称为

自定义卡

，卡内图片的类称为

自定义卡图像

，则可以执行以下操作：

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

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

这将使每个

自定义卡图像始终位于其各自的
自定义卡的底部


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

flex-grow
指定应将flex容器中剩余空间的多少分配给项（）。因为我们给它
1
它会占用所有剩余的空间。
引导示例似乎也有同样的问题

通过在inspector中对您的站点进行测试，我认为您可以通过为每个卡分区（ID为boats、trims等的分区）创建一个类和为每个卡分区内的图片创建一个类来解决此问题

假设此卡类称为
自定义卡
，卡内图片的类称为
自定义卡图像
，则可以执行以下操作：

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

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

这将使每个
自定义卡图像始终位于其各自的
自定义卡的底部


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

flex-grow
指定应将flex容器中剩余空间的多少分配给项（）。因为我们给它
1
它会占用所有剩余的空间。
问题
卡片具有相同的高度，而不考虑其内容，这使得图像在卡片中的位置不均匀


解决方案
为所有卡片子项启用flexbox上下文，并将图像
页边距顶部
设置为
自动
以将其粘贴在底部

将两类
d-flex
和
flex wrap
添加到卡中
mt自动
class到图像

加上你的船
我们为许多船只提供预设，并正在努力将您的船只添加到Trimlog应用程序中。
将存储与您的船相关的船特定数据
唱片剪辑
在培训期间，您可以在不同的天气条件下在不同的地点尝试多种不同的修剪
不同的地点。在水上记录这些数据，这样你就永远不会忘记
问题
卡片具有相同的高度，而不考虑其内容，这使得图像在卡片中的位置不均匀


解决方案
为所有卡片子项启用flexbox上下文，并将图像
页边距顶部
设置为
自动
以将其粘贴在底部

将两类
d-flex
和
flex wrap
添加到卡中
mt自动
class到图像

加上你的船
我们为许多船只提供预设，并正在努力将您的船只添加到Trimlog应用程序中。
将存储与您的船相关的船特定数据
唱片剪辑
在培训期间，您可以在不同的天气条件下在不同的地点尝试多种不同的修剪
不同的地点。在水上记录这些数据，这样你就永远不会忘记
这看起来已经不错了，但现在的问题是文本消失在图像后面：我推动了更改，你知道我做错了什么或我必须添加什么吗？是的，这是我的
位置：绝对
方法的问题。我用另一个选项编辑了我的问题。谢谢，你的答案和坎特布鲁的答案结合起来对我最有效。我从另一个答案的图像中选择了
mt auto
，除此之外，我从你的答案中选择了样式。如果没有
mt auto
，则会出现与以前相同的问题。这是我的HTML和样式：看起来已经不错了，但现在的问题是文本消失在图像后面：我推动了更改，你知道我做错了什么或我必须添加什么吗？是的，这是我的
位置：绝对
方法的问题。我用另一个选项编辑了我的问题。谢谢，你的答案和坎特布鲁的答案结合起来对我最有效。我从另一个答案的图像中选择了
mt auto
，除此之外，我从你的答案中选择了样式。如果没有
mt auto
，则会出现与以前相同的问题。这是我的HTML和样式：非常感谢，你的答案和巴斯范德林登的最适合我。我从你的答案中选择了
mt auto
，除此之外，我从另一个答案中选择了样式。这个答案本身也适用，但组合看起来更好。非常感谢你，你的答案和巴斯范德林登的组合对我最有效。我从您的an中为图片拍摄了
mt auto
<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>