CSS 响应式视图中的 Bootstrap 3 面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30375558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Panels in responsive view
提问by kylebellamy
I am using four panels in a layout, each full width. They stack nicely in sm and xs views as they should. I've set the panels to have no styling when in md and lg view sizes which works as it should.
我在布局中使用了四个面板，每个面板都是全宽的。他们应该在 sm 和 xs 视图中很好地堆叠。我已经将面板设置为在 md 和 lg 视图大小下没有样式，它应该可以正常工作。
How would I get them to display collapsed when in sm and xs views only? Currently, they are open which is ok but given the height of some of the data, it would be better if I could have the initial state be collapsed.
当仅在 sm 和 xs 视图中时，如何让它们显示折叠状态？目前，它们是打开的，这没关系，但是考虑到某些数据的高度，如果我可以折叠初始状态会更好。
Can't put code here as it is filled with loads of other database, js and other things as we are still building it and that has not been cleaned up into files.
不能把代码放在这里，因为它充满了其他数据库、js 和其他东西的负载，因为我们仍在构建它并且尚未清理到文件中。
回答by ccdiego5
1) need div class="row"
1）需要 div class="row"
2) col-xs-is auto, for all dont need to call others col-sm, mdor lganyway will work like col-xs, col-sm, col-md and and col-lg
see here Grid-options
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>
Now if you want to display only for col-lg and col-md
现在如果你只想显示 col-lg 和 col-md
You need this:
你需要这个：
<div class="row">
<div class="col-md-6 col-lg-6 visible-md visible-lg hidden-xs hidden-md">
</div>
</div>
