Bootstrap 的手风琴行为

Question

我正在尝试做一些 Bootstrap 技巧，但遇到了问题...

这是我想要的行为：

我的页面上有三个“列表”：朋友、状态更新和结果，它们在计算机全屏时显示在三列中。 但是，当 bootstrap 将这些随机排列到一个垂直列中以供其他设备使用时，它会使列表变得非常长。所以，我想要 pc 屏幕 3 列大小的完整显示，但对于较小的平板电脑和手机，我希望它们折叠到 Bootstrap 手风琴类的标题中。

但似乎必须手动单击这些以将它们缩小到标题。我尝试添加以下类以根据屏幕大小自动缩小或扩大手风琴，

“隐藏-xs 隐藏-sm”

它几乎可以工作了！

如果没有上述类，所有手风琴的东西都可以手动工作，通过单击手风琴标题来缩小或扩展。 但是，当我将上述类添加到附加小提琴的第 11 行时， 该列以较小的尺寸正确隐藏，但现在手风琴不起作用。

这是没有添加上述类的小提琴：

http://jsfiddle.net/grooble/Nykx6/5/

<div class="container">
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseStatus">
          Status
        </a>
      </h4>
    </div>      
    <div id="collapseStatus" class="panel-collapse collapse in">
      <div class="panel-body">
        <div id="doNews">
            <p>
                However, a potential takeover 
                blah, blah, blah...
            </p>
        </div>
      </div>
    </div>
   </div>
</div>

有什么建议吗？

Answer 1

如果我理解得很好，你基本上希望（从你的例子中）让你的手风琴默认收缩（折叠）？如果是这样的话：

替换（删除“in”类）：

<div id="collapseStatus" class="panel-collapse collapse in">

通过

<div id="collapseStatus" class="panel-collapse collapse">

cf jsFiddle：LIVE DEMOhttp://jsfiddle.net/mjarro/Nykx6/8/