为什么媒体查询不适用于引导程序中的某些类答案

【问题标题】：Why media queries not working with some classes in bootstrap为什么媒体查询不适用于引导程序中的某些类
【发布时间】：2018-08-04 14:57:19
【问题描述】：

我之前已经开始使用引导程序（仍在 V.3.7 中）并且我有一个案例，我正在使用诸如 facebook 封面图片和笔记本电脑屏幕的个人资料图片之类的东西，但当我缩小屏幕我注意到我的媒体查询不工作，但之前的媒体查询工作没有问题.. 如果他们有任何问题，我会在下面发布我的媒体查询，如果有人纠正他们，我会很高兴：

/* Small devices */
@media screen and (max-width: 767px){
    .header .navbar-default{
        background-color: #fff !important;
        border-color: #e6e6e6;
    }
    .about-iphone img{
        width: 100%;
    }
    .signup .col-md-3{
        text-align: center;
        padding-top: 50px;
    }
    .modal-dialog {
        margin: 30px auto;
        width: 350px;
    }
    .modal-content {
        width: 350px;
    }
    #modal-img .modal-dialog {
        width: 350px;
        margin: 30px auto;
    }
    #modal-img .modal-content {
        width: 350px;
    }
    .cover img.ast-image-lg{
    height: 200px;
    }
}

/* Small devices and tablets */
@media screen and (max-width: 768px){
    .header-map{
        display: none;
    }
    .header-text , .header-btns{
        text-align: center;
    }
    .modal-dialog {
        margin: 30px auto;
        width: 350px;
    }
    .modal-content {
        width: 350px;
    }
    #modal-img .modal-dialog {
        margin: 30px auto;
        width: 350px;
    }
    #modal-img .modal-content {
        width: 350px;
    }
    .ast-profile-text>h2{
    font-weight: 700;
    font-size:16px;
    }

    .ast-image-profile
    {
        margin: -45px 10px 0px 25px;
    }
    .cover img.ast-image-lg{ 
        height: 200px;
    }
}

中型设备的“.cover img.ast-image-lg”类中的图像大小必须为 350 像素，小型设备应为 200 像素。以上类都可以正常工作。
我还在标题中使用了肉标签：

<meta name="viewport" content="width=device-width" initial-scale=1.0" />

【问题讨论】：

标签： css twitter-bootstrap-3 responsive-design media-queries

【解决方案1】：

您的媒体查询都指向仅 1 像素外：

@media screen and (max-width: 767px)
@media screen and (max-width: 768px)

从技术上讲，它们应该是这样的：

@media screen and (min-width: 768px) {
/* For Small devices (Tablets) */
}

@media screen and (max-width: 767px) {
/* For Extra Small devices (Phones) */    
}

请阅读文档以供参考： http://getbootstrap.com/docs/3.3/css/#grid

【讨论】：