屏幕小时如何折叠引导列？

Question

有没有办法使用 Bootstrap 完成上述操作，如果屏幕足够宽，则显示 3 列，但在较小的屏幕（如移动设备）上仅显示第一列和最后一列？

Answer 1

您根本不需要 col-xs-12 - 默认情况下，所有没有 -xs- 指定的内容将在移动设备上全宽显示（即：xs 大小）。您需要做的就是在比 xs 更大的视口上指定列。请注意，还有一个 -sm- 类，因此如果您想在小视口上跨越 2（仍然在小屏幕上隐藏 div 2）：

<div class="col-md-4 col-sm-6">Column 1</div>
<div class="col-md-4 hidden-xs hidden-sm">Column 2</div>
<div class="col-md-4 col-sm-6 ">Column 3</div> 

这两个都将在 xs 尺寸上显示全宽，但在小视口上将显示彼此并排的 div 1 和 3，在中型和较大屏幕上水平显示所有三个。如果您想在大屏幕上显示不同的显示，您还可以添加一个 col-lg-in。

编辑 - 根据@Siavas 的评论 - 此解决方案需要 Bootstrap 3（链接 - https://getbootstrap.com/docs/3.3/css/#grid-example-basic）