响应式 - 在特定宽度上隐藏 facebook 页面插件答案

【问题标题】：Responsive - Hiding facebook page plugin on certain width响应式 - 在特定宽度上隐藏 facebook 页面插件
【发布时间】：2016-11-01 22:22:57
【问题描述】：

我试图隐藏 facebook 页面插件，但它看起来不起作用。这是我的 CSS 代码

@media only screen and (max-width:800px){
.fb-page{
    visibility: hidden;
}

这是我存储 FB 的 HTML 部分。

<section id="login-form" class="no-margin customloginform">
    <label>Username: </label><br /><asp:TextBox runat="server" ID="txtUsername" type="text" CssClass="centermargin" class="form-control" required="required"></asp:TextBox><br />
    <label>Password: </label><br /><asp:TextBox runat="server" ID="txtPassword" type="password" CssClass="centermargin" class="form-control" required="required"></asp:TextBox><br />
    <asp:Button runat="server" id="btnLogin" type="submit" OnClick="btnLogin_Click" name="Login" class="btn btn-primary btn-lg centermargin" required="required" Text="Login" Width="150px"></asp:Button>
    <center><a href="Account/ForgotPassword.aspx">Forgot Password</a></center>
    <center style="color:#ffffff">Not a member? <a href="Account/Register.aspx">Register</a></center><br /><br />
    <div class="hidden-sm"><div class="fb-page " data-href="https://www.facebook.com/TechKidPHMods/" data-tabs="timeline" data-width="280" data-height="409" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/TechKidPHMods/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TechKidPHMods/">TechKidPHMods</a></blockquote></div></div>
</section>

所以有什么想法吗？谢谢

【问题讨论】：

向我们展示您的 HTML。您应该改用display: none，但如果FB页面插件不在带有class="fb-page"的元素中，则两者都不会工作。
我已经更新了。检查:)
尝试将类放在<div class="hidden-sm"> 位上。 Facebook 页面代码将用实际的插件 HTML 替换您的 <div class="fb-page">，我敢打赌它这样做时会清除类。
class="fb-page" 是 fb 对那个 div 部分的要求，所以是的......即使使用 class="hidden-sm" 添加一个新的 div 也不起作用
坦率地说，我认为我们需要查看该问题的真实示例页面。其他事情正在发生。您在您的网站中使用 Bootstrap 吗？

标签： html css facebook responsive-design responsive

【解决方案1】：

好的，所以你的display: nones 不起作用的原因是你有其他规则在起作用。

你有几个选择：

在您的 CSS .fb-page { display: none } 媒体查询中添加 !important。
稍后在您的 CSS 规则列表中应用您的媒体查询（在屏幕截图中的两条规则之后）
在要隐藏的 div 上放置一个 ID 而不是类。

考虑学习浏览器的网络开发工具。使用它们可以轻松调试此类问题，因为它们会准确显示特定规则被忽略的原因。

【讨论】：

好吧，我确实尝试过使用.fb-page { display: none !important; }，但那不起作用但现在我确实有一个想法并尝试了这个#fbwidget, #facebook, .plugin{ display: none !important; }，哦，天哪，它有效。从字面上看，在 fb 的 div 上添加了 fbwidget id 然后是的，我确实检查了 chrome 的检查元素上的所有内容。添加了#facebook 和 .plugin 并且可以正常工作
感谢您指出 :D 。我确实使用开发工具，但看起来我没有注意到这些。呵呵。谢谢:)

【解决方案2】：

尝试：

@media only screen and (max-width:800px){
.fb-page{
    display: none;
}

或者如果您使用的是 Bootstrap，请尝试 hidden-xs 或 hidden-sm。

祝你好运。

【讨论】：

【解决方案3】：

在您的代码中，您缺少 .fb-page 的右大括号，但如果您想在该断点处完全隐藏某些内容，我还要说您应该使用 display: none。试试这个：

@media only screen and (max-width:800px){
  .fb-page {
    display: none;
  }
}

【讨论】：

刚刚从 VS 复制了这行代码，所以是的，它遗漏了一些东西，但它没有......无论如何，显示：无；没有成功:(
您有正在处理的页面的 URL 吗？看到完整的标记和级联会很有帮助。
目前，它在本地主机上，但再次检查问题，我已经更新了它