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; } 
     }