Bootstrap 3媒体查询无法移除小屏幕div内边距问题求助

嘿，我一眼就瞅出问题在哪啦！你写的媒体查询代码有个语法小错误，导致移动端的样式根本没生效，咱们一步步来修复：

1. 先修正媒体查询的语法错误 #

你原来的代码里，媒体查询内的样式声明没加大括号，浏览器根本识别不了：

/* 错误写法 */
@media (max-width: 375px) { 
    #homepage-banner-content margin-top:0px; 
} 

正确的写法应该给选择器加上大括号包裹样式：

#homepage-banner-content{ 
    margin-top:150px; /* 桌面端默认样式 */
} 
/* 小屏幕适配 */ 
@media (max-width: 375px) { 
    #homepage-banner-content {
        margin-top: 0px;
    } 
} 

2. 用Bootstrap 3官方断点覆盖全移动端 #

你用的max-width:375px只覆盖了特定宽度的手机，Bootstrap 3里的移动端（xs屏幕）官方断点是max-width:767px，如果想覆盖所有移动端设备，建议改成这个断点，不管是小屏还是大屏手机都能生效：

#homepage-banner-content{ 
    margin-top:150px; 
} 
/* 覆盖所有Bootstrap 3移动端屏幕 */
@media (max-width: 767px) { 
    #homepage-banner-content {
        margin-top: 0; /* 移除移动端外边距 */
    } 
} 

3. 区分padding-top和margin-top #

你提到一开始设置的是padding-top:150px，但代码里用的是margin-top，如果实际要移除的是内边距，把代码里的margin-top换成padding-top就行：

#homepage-banner-content{ 
    padding-top:150px; /* 桌面端内边距 */
} 
@media (max-width: 767px) { 
    #homepage-banner-content {
        padding-top: 0; /* 移除移动端内边距 */
    } 
} 

这样修改后，移动端的样式就能正常生效啦～

内容的提问来源于stack exchange，提问作者Arun