Bootstrap jumbotron改变了较小屏幕的高度

时间:2015-03-29 23:07:04

标签: css twitter-bootstrap media-queries

简单的bootstrap jumbotron ......

.jumbotron-page {
height:300px;
}

我需要在移动/小型设备上将高度更改为100px,所以我得到了这个......

.jumbotron-page {
height:100px;
}

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

1 个答案:

答案 0 :(得分: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;
    }
}