Twitter Bootstrap响应实用程序类使用

Question

如何使用Twitter引导响应实用程序类，例如.visible-desktop。我试图按照Bootstrap网站上的例子进行操作，

<span class="visible-desktop">✔ Desktop</span>

就像这样的图像，

<span class="visible-desktop">
  <img src="<%=(image_path('green.jpg'))%>"></img>
</span>

但是当我将浏览器窗口缩小到平板电脑或手机尺寸时，图像仍然存在。

Answer 1

以防万一有人想用 Bootstrap 3.0 来做这件事。嘿已经改变了这些课程：

.visible-phone成为.visible-sm

.visible-tablet成为.visible-md

.visible-desktop成为.visible-lg

.hidden-phone成为.hidden-sm

.hidden-tablet成为.hidden-md

.hidden-desktop成为.hidden-lg

用法：

<span class='hidden-sm hidden-md visible-lg'>

可以找到Bootstrap 3.0迁移指南here。

Answer 2

这是一个很好的图表，解释了如何在bootstrap 3.1中使用它们

Answer 3

这对我有用 -

尝试将.hidden-phone和.hidden-tablet添加到span课程中，如下所示：

<span class="visible-desktop hidden-phone hidden-tablet"> </span>

Answer 4

您是否复制/粘贴了代码？因为你有一个错字...

<span class="visable-desktop">

应该是

<span class="visible-desktop">

Answer 5

如果所有依赖项都已就位并且正确引用（CSS文件等），则不应在平板电脑或手机上显示课程.visible-desktop。

在Bootstrap自己的介绍性文档的这一部分，您可以看到一个实例：http://twitter.github.com/bootstrap/scaffolding.html#responsive

尝试在非常简单的标记上应用该类，并首先查看它是否有效。如果它没有赢得任何其他标签。 ：）

祝你好运！