css - Bootstrap CSS 固定移动设备上 div 的高度

Question

我有一个固定高度的 div。

<div class="col-md-12" style="height:250px;">
<img src="example.png" />
</div>

当我将屏幕大小调整为移动设备时，我的 div 宽度会响应并缩小，但高度仍然保持不变。

很难表述我的问题，但是有没有办法使用固定高度但使其具有响应性？

Answer 1

将 @media 查询添加到您的 css 文件中以覆盖原始查询。像这样的事情:

@media screen and (min-width: 1024px) {
    myNewDivHeight{
        height:250px;
    }
}

将此类添加到您的 div 中，如下所示:

class="col-md-12 myNewDivHeight"

当屏幕分辨率。超过 1024px 这将起作用。当你收缩时它将不起作用，因此 Bootstrap 响应将触发。或者您可以为其他分辨率添加新的媒体查询。