0

我有这样的代码片段：

 <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 规则进行操作。但我不知道如何加入响应式引导类，如“可见电话”和“崩溃”类。

4

2 回答 2

0

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

基于你的小例子：

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

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

@media (max-width:480px) { 
         .in{ display:none; }
         .alert-info{ display:none; }
         }
于 2013-07-12T14:53:20.503 回答
0

由于collapse是一个javascript插件，我认为答案在于使用一些javascript。

如果您删除in该类，它将默认关闭您的折叠，这很有用。然后，您可以在文档准备好时进行检查。

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

这些方法在文档中： Bootstrap Collapse

通过单击具有不同屏幕宽度的运行来查看它的实际效果：http: //jsfiddle.net/LaAWc/1/

如果您希望不断检查此内容，则必须使用计时器进行轮询以继续检查。如果您对此感兴趣，请参阅如何在 jquery 中检测屏幕分辨率是否发生变化？

于 2013-07-12T18:33:39.263 回答