响应视图中的Bootstrap 3面板

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那样看到网格选项

<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>