如何在响应式布局中显示和隐藏多个Facebook Like按钮

时间:2013-12-10 16:03:51

标签: css facebook responsive-design facebook-likebox

在我的设计中,我将Like按钮移动到小屏幕尺寸的页脚。在Chrome中,通过多次调用窗口小部件可以实现花花公子。在其他浏览器中,可见的Like按钮正确隐藏,但另一个不会在调整大小时加载。

http://jsfiddle.net/isherwood/kc3r2

@media (max-width: 400px) {
    #header .fb-like {display: none;}
    #footer .fb-like {display: block;}
}

<div id="header">
    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div id="footer">
    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>

1 个答案:

答案 0 :(得分:1)

尝试使用visiblity代替display

#footer .fb-like { visibility:hidden; }

@media (max-width: 400px) {
    #header .fb-like { visibility:hidden; }
    #footer .fb-like { visibility:visible; }
}