如何在引导程序中为移动设备的垂直堆叠列之间添加空间

Question

我有四张图像在桌面上水平地穿过引导程序。在移动设备上，我希望这些图像垂直堆叠（他们这样做）。唯一的问题是当图像在移动设备上垂直堆叠时，图像之间没有垂直间距。是否有我可以添加的引导程序样式，以便它在移动设备上垂直堆叠？

这是我的bootply： http://www.bootply.com/ccP5Q7o6a0

这是我的代码：

Stop

Answer 1

使用仅在最小屏幕上显示的Bootstrap visible-xs类。

 <div class="col-xs-12 visible-xs"><br></div>

演示：http://bootply.com/UfC6tohHa7

Answer 2

如果需要，

使用您自己的媒体查询来执行相关任务。

在行中添加一个类：

 <div class="row myclass">

然后添加媒体查询以按所需宽度处理它

  @media (max-width: 600px) {
     .myclass > div {
         margin-bottom: 10px;
     }
  }

如上所述。

Answer 3

对于Bootstrap 5，只需在环绕列的行上添加装订线类。

对于垂直间距：

<div class="row gy-5"></div>

这会在列之间添加一个垂直空间。

对于水平间距：

<div class="row gx-5"></div>

这会在列之间添加一个水平空间。

继续编码！