Twitter的引導崩潰打開智能手機

Question

我有這樣的代碼片段：

<div class="alert alert-info">Today's news 
     <div class="pull-right"><a class="btn btn-small" data-toggle="collapse" data-target="#newsDiv"><i class="icon-chevron-down"></i></a></div> 
    </div> 
    <div id="newsDiv" class="collapse in"> 
     Today something happened<br> 
     Also yesterday happened<br> 
     Maybe tomorrow<br> 
    </div> 

的jsfiddle：http://jsfiddle.net/gfUXW/

我想這種行爲：當手機用戶訪問（寬度480像素及以下）的坍塌將被關閉，當用戶訪問更大的設備崩潰時將自動打開。

爲了使它響應我需要做的CSS規則。但我不知道如何加入像「可見電話」和「崩潰」類的bootstrap responsive classes。

Answer 1

由於坍塌是一個JavaScript插件，我認爲，答案在於使用一些JavaScript。

如果您刪除了in類，它將使您的摺疊在默認情況下保持關閉狀態，這對知道有幫助。然後，您可以在文檔準備就緒時進行檢查。

if ($(window).width() > 480) { 
    $(".collapse").collapse('show'); 
    } 

的方法是在文件中：Bootstrap Collapse

看到它在行動通過點擊不同的屏幕寬度來看：http://jsfiddle.net/LaAWc/1/

如果你想要這個不斷檢查，你必須與輪詢一個計時器來保持檢查。如果您感興趣，請參閱How to detect in jquery if screen resolution changes?

Answer 2

你需要添加響應CSS文件第一 那麼你可以根據你的相關媒體查詢 http://twitter.github.io/bootstrap/scaffolding.html#responsive

小例子添加邏輯：

• 當您打開下面的鏈接設備大於480px時，您會看到所有內容
• 當您使用小於480px的設備打開時;你會看到什麼（變化瀏覽器的大小）

http://jsfiddle.net/iambnz/gfUXW/2/

@media (max-width:480px) { 
     .in{ display:none; } 
     .alert-info{ display:none; } 
     }