Twitter Bootstrap響應實用程序類的用法

Twitter Bootstrap如何響應實用程序類，如.visible-desktop應該被使用。我曾試圖按照上引導網站的例子，Twitter Bootstrap響應實用程序類的用法

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

這樣的圖像上，

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

但圖像依然當我縮小瀏覽器窗口，平板電腦或手機的大小。

使用這些都是你包括'引導響應。「'bootstrap.css'樣式表之後的'css'樣式表？或根本？ –

是的，我已正確包含樣式表，並且其他響應功能正在工作。 –

你可以發佈你的設置，你如何使用它在http://jsfiddle.net？該類正在被'！important'標誌隱藏，並且應該覆蓋該元素中的任何其他'display'屬性，所以必須有別的東西。 –

你複製/粘貼你的代碼？因爲你有一個錯字...

<span class="visable-desktop">

應該

<span class="visible-desktop">

2012-05-07 19:28:55 ken

我改正了這個錯字，但它仍然存在不行。 –

這對我的作品 -

嘗試增加.hidden-phone和.hidden-tablet您span類，如下所示：

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

2012-06-22 06:26:09 bhollywood

我嘗試更新Bootstrap之前嘗試這樣的事情。 '.visible-destop'類應該可以完成這個答案中提到的其他兩個類的工作，所以實際上它應該是'.visible-destop'本身或'.hidden-phone'和'.hidden-平板電腦一起 –

該類別.visible-desktop不應顯示如果所有依賴關係都已就位並正確引用（CSS文件等），則可以在平板電腦或手機上使用。

在上引導自己的介紹文檔，這部分你可以看到一個活生生的例子：http://twitter.github.com/bootstrap/scaffolding.html#responsive

嘗試應用類上的一個非常簡單的標籤，看看它是否在所有工作第一。如果沒有，它不會在任何其他標籤上工作。 :)

祝你好運！

2012-12-05 14:29:24

以防萬一有人想這樣做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'>

引導程序3.0遷移指南可以發現here。

2013-10-12 09:26:06 doonot

保存我的屁股先生，謝謝。 –

這是一個偉大的圖解釋瞭如何在引導3.1

enter image description here

2014-02-27 20:30:22

非常有用。謝謝！ –

回答