html - 带有 Bootstrap 的媒体查询不起作用

Question

我想为移动设备隐藏大图片。寻找 at this site我在我的 CSS 中添加了以下样式:

//medium+ screen sizes
@media (min-width:992px) {
    .desktop {
            display:block !important;
    }
}

//small screen sizes
@media (max-width:991px) {
    .mobile {
            display:block !important;
    }

    .desktop {
            display:none !important;
    }
}

然后我像这样在我的 html 中应用这个类:

<img class="desktop" src="img/test/test.jpg" 
    alt="jhkjhjk" height="600" width="900">

但是当我缩小浏览器窗口时，图像仍然存在。我错过了什么吗？

Answer 1

由于您使用的是 Boostrap，您可以更轻松地做到这一点。

追加一类

visible-md

到你的形象。

md 用于 >992 像素。

查看您可以使用的简单类(class) http://getbootstrap.com/css/#responsive-utilities

编辑:如果您要进行可视化，可能想进行 visible-md visible-lg。该图表解释了所有组合。