Bootstrap jumbotron 更改小屏幕的高度

Question

简单bootstrap超大屏幕...

.jumbotron-page {
height:300px;
}

我需要在 mobile/small 设备上将高度更改为 100px，所以我明白了...

.jumbotron-page {
height:100px;
}

我只是无法通过正确的媒体查询来实现这一目标。任何帮助表示赞赏。

Answer 1

假设您的移动设备的屏幕尺寸小于 ~700px

包括以下元数据：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

媒体查询：

@media all and (max-width: 700px)
{
    .jumbotron-page
    {
        height: 100px;
    }
}

Bootstrap jumbotron change height for smaller screens