Question

我试图做一些Bootstrap技巧并遇到问题...

这是我想要的行为：

我有三个＆＃34;列表＆＃34;在我的页面上：朋友，状态更新和结果，在完整的计算机屏幕上显示在三列中。但是，当bootstrap将这些内容拖放到其他设备的一个垂直列中时，它会使列表不可能长。因此，我希望PC屏幕3柱尺寸的完整显示，但对于较小的平板电脑和手机，我希望它们可以折叠成Bootstrap手风琴类的标题。

似乎必须手动点击它们才能将它们缩小到标题。我尝试添加以下类来根据屏幕大小自动缩小或扩展手风琴

＆＃34; hidden-xs hidden-sm＆＃34;

它几乎可以工作！

如果没有上述类，所有手风琴的东西都可以通过点击手风琴标题手动，缩小或扩展。但是，当我将上面的类添加到附加小提琴的第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 DEMO http://jsfiddle.net/mjarro/Nykx6/8/

Bootstrap的手风琴行为

1 个答案: