隐藏和可见的类答案

【问题标题】：Hidden and visible classes隐藏和可见的类
【发布时间】：2014-08-08 03:21:51
【问题描述】：

我正在尝试弄清楚 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”。你能解释一下有什么区别吗？

【问题讨论】：

您的第一个 sn-p 代码确实隐藏了 DIV。也许您的页面上有其他内容使其可见？
可能你的.text-center 上面有一些display: 是在引导 css 之后出现的？
@LloydBanks 我检查了这个 div 的 css 样式，但我没有在任何地方设置显示属性
@Dejan.S 我删除了 .text-center 类，但仍然有同样的问题，所以我认为这是关于引导 css 和设备宽度的问题

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

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

【讨论】：

是的，问题是我使用 hidden-xs 而不是 hidden-sm。

【解决方案2】：

您可以使用以下 Javascript/JQuery 脚本隐藏 div。这不需要引导类。（我也不熟悉）。以下脚本针对移动 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'); 
     }

【讨论】：

您真的不应该使用针对（可能很大/变化的数量）特定设备的 jquery 脚本来解决这个问题，因为他关心的是基于视口宽度的响应式设计。如果您绝对需要覆盖未包含在列中的高级内容等，最好还是使用 CSS 媒体查询作为视口大小，因为这与引导程序的其余部分一致。跨度>
感谢您的回答。但我想用引导 css 类或至少用我的自定义 css 来解决这个问题。