响应式视图中的 Bootstrap 3 面板答案

【问题标题】：Bootstrap 3 Panels in responsive view响应式视图中的 Bootstrap 3 面板
【发布时间】：2015-05-21 13:43:57
【问题描述】：

我在一个布局中使用了四个面板，每个面板都是全宽的。他们应该在 sm 和 xs 视图中很好地堆叠。我已将面板设置为在 md 和 lg 视图尺寸中没有样式，这应该可以正常工作。

如何让它们仅在 sm 和 xs 视图中显示折叠？目前，它们是打开的，这没关系，但考虑到某些数据的高度，如果我可以将初始状态折叠起来会更好。

无法将代码放在这里，因为它充满了其他数据库、js 和其他东西，因为我们仍在构建它并且尚未清理到文件中。

【问题讨论】：

在旁注中，我知道使用“in”类可以打开它们。如果我删除该类，那么它们将折叠在 md 和 lg 大小上，这不是我想要的。
如果你不能在这里放代码，那么我们不能在这里放答案！
然而，下面有一个答案......

标签： css twitter-bootstrap panel responsiveness

【解决方案1】：

1) 需要div class="row"

2) col-xs- 是 auto，因为所有人都不需要打电话给其他人 col-sm、md 或 lg 无论如何都会像 col-xs、col-sm、col- md and and col-lg 看这里Grid-options

<div class="row">
    <div class="col-xs-3">
        <div class="panel panel-default">
            <div class="panel-body">
                Basic panel example
            </div>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="panel panel-default">
            <div class="panel-body">
                Basic panel example
            </div>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="panel panel-default">
            <div class="panel-body">
                Basic panel example
            </div>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="panel panel-default">
            <div class="panel-body">
                Basic panel example
            </div>
        </div>
    </div>
</div>

现在如果你只想显示 col-lg 和 col-md

你需要这个：

<div class="row">
    <div class="col-md-6 col-lg-6 visible-md visible-lg hidden-xs hidden-md">

    </div>
</div>

【讨论】：