Bootstrap 响应视图中的 3 个面板

Question

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

如何让它们仅在 sm 和 xs 视图中显示为折叠状态？目前，它们是打开的，但考虑到一些数据的高度，如果我能折叠初始状态会更好。

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

Answer 1

1) 需要div class="row"

2) col-xs- 是 auto，因为无论如何都不需要调用其他 col-sm、md 或 lg将像 col-xs、col-sm、col-md 和 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>

Bootstrap 响应视图中的 3 个面板

Bootstrap 3 Panels in responsive view

css

panel

twitter-bootstrap

responsiveness