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规则来完成。但我无法想象如何加入responsive classes引导程序，如“可见电话”和“崩溃”类。

Answer 1

您需要先添加响应式css文件然后您可以将逻辑添加到相关的媒体查询 http://twitter.github.io/bootstrap/scaffolding.html#responsive

基于你的小例子：

当您使用大于480像素的设备打开以下链接时，您将看到所有内容
当您使用小于480px的设备打开时;你什么也看不见（改变浏览器大小）

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

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

Answer 2

由于崩溃是一个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?

Twitter Bootstrap崩溃为智能手机开放

2 个答案: