Twitter Bootstrap响应实用程序类使用

Question

如何使用Twitter Bootstrap响应实用程序类,如.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迁移指南.

Answer 2

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

Answer 3

您复制/粘贴了您的代码吗？因为你有一个错别字...

<span class="visable-desktop">

应该

<span class="visible-desktop">