Question

我正在努力解决媒体查询问题。

在PROJECTS部分我想要显示3张卡片，我想要的方法是在DESKTOP上隐藏卡片4。

在手机上，我希望第二张（别名摄影）卡首先显示，因此我想隐藏卡片1.

在小屏幕上，所以低于575px的任何东西，我都将card-1设置为属性显示：无。这个工作

但是当我扩展到大于575px的任何东西时，card-4 DOESNT上的display：none属性工作，我认为它不会工作。

请有人检查我的网站上的代码，看看为什么会这样？下面是我目前正在制作的网站链接。

www.oliver-stott.co.uk

Answer 1

如果您使用Dreamweaver构建网站，我遇到了同样的问题。当我注意到桌面版继承了移动版的样式时，我修复了它。所以如果你给某个元素显示：none;在手机的样式中，您希望它在桌面上显示，您必须在桌面上更改样式以显示：块。如果你想在移动设备上显示某些东西而不是在桌面上显示，那么另一种方式。希望我有所帮助。

Answer 2

我设法解决了这个，所以我发现我的卡被自动设置为dieplay：阻止css重置。

这意味着显示：无;不会覆盖display：block属性。

一个简单的修复（不理想但现在可以使用）是在要隐藏的元素上设置以下CSS。

.card{                         //This was the CSS applied to ALL cards
    margin: auto;
    padding: 0;
    display: inline-block;  
    vertical-align: middle;
}
.card-4{                      // This is the CSS applied to card 4
    display: none !important;
}

Answer 3

我建议您查看引导程序文档：https://getbootstrap.com/docs/4.1/utilities/display/

在第四张卡片上，尝试使用d-sm-block d-md-none，如下所示：

<div class="card col-sm-8 col-md-3 m-3 d-sm-block d-md-none">
...
</div>

让我知道它是否按预期工作

显示：无属性无法在响应式网站

3 个答案: