Question

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

如果仅在sm和xs视图中，我如何让它们显示折叠？目前，它们是开放的，但是考虑到某些数据的高度，如果我可以将初始状态折叠，那就更好了。

不能把代码放在这里，因为它充满了其他数据库，js和其他东西，因为我们仍在构建它并且还没有被清理成文件。

Answer 1

1）需要div class="row"

2）col-xs- 自动，因为所有人都不需要打电话给其他人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面板

1 个答案: