Twitter Bootstrap 响应式实用程序类使用 [英] Twitter Bootstrap responsive utility class usage

问题描述

应该如何使用 Twitter Bootstrap 响应式实用程序类，例如 .visible-desktop.我尝试按照 Bootstrap 网站上的示例进行操作，

How are the Twitter Bootstrap responsive utility classes such as .visible-desktop supposed to be used. I have tried to follow the example on the Bootstrap web site,

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

在这样的图像上，

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

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

but the image remains when I shrink the browser window to tablet or phone size.

推荐答案

以防万一有人想用 Bootstrap 3.0 做到这一点.嘿已经改变了这些类:

Just in case someone wants to do this with Bootstrap 3.0. Hey have changed these classes:

.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 迁移指南.

The Bootstrap 3.0 migration guide can be found here.

这篇关于Twitter Bootstrap 响应式实用程序类使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！