html - 隐藏类和可见类

Question

我正在尝试了解 Bootstrap 响应功能的工作原理。我有一个 div，我希望它在移动设备上隐藏:

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

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

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

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

我认为“hidden-xs”等同于“visible-md visible-lg”。你能解释一下有什么区别吗？

Answer 1

您是否可以从宽度等于或大于 768 像素的视口(viewport)对其进行测试？因为 hidden-xs 等同于 visible-sm visible-md visible-lg，而不仅仅是你发布的 visible-md visible-lg .如果您一直在一个小视口(viewport)上查看，那么第一个示例会显示它，而第二个示例会隐藏它。

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

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