显示:无属性在响应网站上不起作用

Question

I#m正在努力解决媒体查询问题。

在项目部分我想3卡显示，我想这样做的方式是隐藏在桌面上的卡4。

当在手机上时，我希望第二张(别名摄影)卡首先出现，因此我想隐藏卡1。

在小屏幕上，因此任何低于575px的内容，我都将card-1设置为property display:none。这是可行的

但是当我放大到大于575px的任何东西时，card-4上的display:none属性不起作用，而且我认为它不起作用。

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

www.oliver-stott.co.uk

Answer 1

如果你正在用dreamweaver建立网站，我也有同样的问题。当我注意到桌面版本继承了移动版本的样式时，我修复了这个问题。因此，如果你在手机的样式中给出了某个元素的display:none，并且你想让它显示在桌面上，你必须将桌面中的样式更改为display:block。反之亦然，如果你想要在移动设备上显示而不是在桌面上显示。希望我能帮上忙。

Answer 2

我设法解决了这个问题，所以我发现我的卡在css重置时自动设置为dieplay:block。

这意味着display:none；不会覆盖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>

让我知道它是否如预期的那样工作