Display:none 属性在响应式网站上不起作用答案

【问题标题】：Display:none Property not working on responsive websiteDisplay:none 属性在响应式网站上不起作用
【发布时间】：2018-06-09 23:14:26
【问题描述】：

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

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

在移动设备上，我希望第二张（别名摄影）卡片首先出现，因此我想隐藏卡片 1。

在小屏幕上，因此任何低于 575 像素的内容，我都将 card-1 设置为属性 display:none。这有效

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

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

www.oliver-stott.co.uk

【问题讨论】：

请在问题中包含相关代码。我们不应该离开现场。

标签： html css containers responsive display

【解决方案1】：

如果您使用 Dreamweaver 构建网站，我也会遇到同样的问题。当我注意到桌面版本继承了移动版本的样式时，我修复了它。所以如果你给某个元素 display:none;在手机样式中，您希望它显示在桌面上，您必须将桌面中的样式更改为 display:block。反之，如果您想在移动设备上显示某些内容而不是在桌面上显示。希望我对您有所帮助。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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>

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

【讨论】：