无法使用 bootstrap 3 媒体查询删除所有小屏幕上的 div 填充答案

【问题标题】：Unable to remove a div padding on all small screens with bootstrap 3 media query无法使用 bootstrap 3 媒体查询删除所有小屏幕上的 div 填充
【发布时间】：2018-10-26 09:49:29
【问题描述】：

我正在制作一个模板。我使用引导程序 3。我的顶部导航菜单下方有一个 div。我为 div 提供了一个 padding-top:150px 。这在普通屏幕上看起来不错，但在小屏幕上看起来很奇怪。

现在我的问题是如何使用引导媒体查询来减少 div 的 padding-top。以下是我尝试过但不起作用的方法。

#homepage-banner-content{
    margin-top:150px;
}

/* Small screen */

@media (max-width: 375px) {
    
    #homepage-banner-content
        margin-top:0px;
    }
}

我想在所有移动屏幕上删除这个 150 像素的填充。请分享你的想法。提前致谢。

【问题讨论】：

标签： twitter-bootstrap-3 media-queries

【解决方案1】：

你可以这样做，

/* Small screen */
@media (max-width: 375px) {         
    #homepage-banner-content{
        margin-top:0px;
    }
}

您只是错过了一个大括号。确保您在 head 标签中添加了元 viewport。

【讨论】：

【解决方案2】：

简单的错字，您在#homepage-banner-content 选择器之后错过了{。发生在我们最好的人身上。

#homepage-banner-content{
    margin-top:150px;
}

/* Small screen */

@media (max-width: 375px) {

    #homepage-banner-content { /* here */
        margin-top:0px;
    }
}

【讨论】：