Html 为什么不'；我的列不能保持小屏幕尺寸的高度吗？

当屏幕缩小时，我有一个三列的堆栈。在全屏显示时，这些列有背景图像，底部填充25%。一旦它们堆叠起来，div的高度就会降低，背景图像就会被切断。我曾试图通过媒体查询来防止这种情况发生，但没有效果

.brdcol{
垫底：25%；
}
.img1{
背景图片：url(https://via.placeholder.com/800);
背景重复：无重复；
背景尺寸：封面；
字体大小：粗体；
字体大小：xx大号；
}
.img2{
背景图片：url(https://via.placeholder.com/800);
背景重复：无重复；
背景大小：100%；
背景尺寸：封面；
字体大小：粗体；
字体大小：xx大号；
}
.img3{
背景图片：url(https://via.placeholder.com/800);
背景大小：80%；
背景重复：无重复；
背景尺寸：封面；
字体大小：粗体；
字体大小：xx大号；
}

---

您可以使用此显示来显示列，并在图像上应用此CSS，只需更改不同设备上的显示即可。我希望你的问题会得到解决

正文{
显示：网格；
网格模板柱：33.33%33.33%33.33%；
}
.img1、.img3、.img3{
背景图片：url(http://commondatastorage.googleapis.com/codeskulptor-demos/riceracer_assets/img/car_2.png);
背景大小：80%；
背景重复：无重复；
背景大小：100%100%；
}
布尔德尔先生{
垫底：100%；
}

实际上，您看到的堆叠布局的行为是我所期望的25%填充。这是另一个布局，行为不端

在内容元素（如锚）上放置布局类不是标准模式。我鼓励您在布局中使用div或其他结构元素，并将链接放在这些元素中

.brdcol{
显示：块；
垫底：25%；
}
.img1{
背景图片：url(https://via.placeholder.com/800);
背景重复：无重复；
背景尺寸：封面；
字体大小：粗体；
字体大小：xx大号；
}
.img2{
背景图片：url(https://via.placeholder.com/800);
背景重复：无重复；
背景大小：100%；
背景尺寸：封面；
字体大小：粗体；
字体大小：xx大号；
}
.img3{
背景图片：url(https://via.placeholder.com/800);
背景大小：80%；
背景重复：无重复；
背景尺寸：封面；
字体大小：粗体；
字体大小：xx大号；
}

如果您能提供一个示例来说明问题的发生，可能有人会很快帮助您（例如在JSFIDLE中）。您是否使用引导？是的，引导。现在我来看看JSFIDLE。请标记您的引导版本。当使用像引导这样的库时，自定义网格CSS不是一个好主意，它已经提供了布局机制。