屏幕小时如何折叠bootstrap列？

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）

Answer 2

将列用作列div：col-md-4 col-xs-12。因此，对于笔记本电脑或台式机屏幕，它将显示为三列。但是，如果是移动视图，它们将崩溃为一个。

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

Answer 3

在<div>中添加其他类，例如col-md-或col-lg-，只需在那里添加col-xs-12，就可以在较小的屏幕上全屏显示

Answer 4

您应该阅读responsive utilities。

为了加快移动友好型开发，您可以使用这些实用程序类通过媒体查询显示和隐藏设备内容。还包括用于在打印时切换内容的实用程序类。

演示 https://jsfiddle.net/nanilab/zx22szz7/

<div class="row">
  <div class="col-md-4 col-xs-12"> Col 1 </div>
  <div class="col-md-4 hidden-xs"> Col 2 </div>
  <div class="col-md-4 col-xs-12"> Col 3 </div>
</div>

Answer 5

在 Bootstrap 4 中，隐藏/可见属性被剥夺了显示属性。该链接可能与“ gavgrifs”答案结合使用。 Missing visible-** and hidden-** in Bootstrap v4

这是3个大小相等的列的示例。对于xs和sm显示，不会显示中间列。

<div class="row">
    <div class="col"> Col 1 </div>
    <div class="col d-none d-md-block"> Col 2 </div>
   <div class="col"> Col 3 </div>
</div>