Question

我试图弄清楚Bootstrap响应功能是如何工作的。我有一个div，我希望它隐藏在移动设备上：

<div class="text-center hidden-xs">
     Content
</div>

我在手机上查看了这个页面，div仍然可见。但如果我做以下事情：

<div class="text-center visible-md visible-lg">
     Content
</div>

然后我的div隐藏在移动设备上并在桌面上可见。

我认为＆＃34; hidden-xs＆＃34;相当于＆＃34; visible-md visible-lg＆＃34;。你能解释一下有什么区别吗？

Answer 1

您是否可以从宽度为/超过768px的视口进行测试？因为hidden-xs相当于visible-sm visible-md visible-lg，而不仅仅是visible-md visible-lg。如果您一直在小视口上查看，它将在第一个示例中可见，并在第二个示例中隐藏。

您也可以通过简单地调整浏览器窗口大小来测试这一点，如果您没有进行任何媒体查询或其他特定于手机的操作，就像进行健全性检查一样。

在http://getbootstrap.com/css/#responsive-utilities-classes的文档中有一个可见与隐藏的有用表格，所以如果您感到困惑，请检查一下。

Answer 2

您可以使用以下Javascript / JQuery脚本隐藏div。这不需要bootstrap类。（我也不熟悉）。以下脚本针对移动android和iphone，你也可以定位其他设备。

    if (navigator.userAgent.toLowerCase().indexOf('android') > -1)  {
           $('.text-center hidden-xs').css('visibility','hidden'); 
     }

  if (navigator.userAgent.toLowerCase().indexOf('iphone') > -1)  {
           $('.text-center hidden-xs').css('visibility','hidden'); 
     }

隐藏和可见的类

2 个答案: