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

【问题标题】：How do I add space in between a vertical stacking column for mobile in bootstrap如何在引导程序中移动的垂直堆叠列之间添加空间
【发布时间】：2021-06-14 00:12:07
【问题描述】：

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

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

这是我的代码：

<div class="container">
    <div class="row">
        <h2 class="section-heading">How it Works</h2>

        <div class="col-md-3 col-sm-6">
            <img class="img-responsive" src="http://pngimg.com/upload/apple_PNG40.png">
          <p class="text-center">You need an apple</p>
        </div>
        <div class="col-md-3 col-sm-6">
            <img class="img-responsive" src="http://pngimg.com/upload/apple_PNG40.png">
          <p class="text-center">You need an orange</p>
        </div>
        <div class="col-md-3 col-sm-6">
            <img class="img-responsive" src="http://pngimg.com/upload/apple_PNG40.png">
          <p class="text-center">You need a pineapple</p>
        </div>
        <div class="col-md-3 col-sm-6">
            <img class="img-responsive" src="http://pngimg.com/upload/apple_PNG40.png">
            <p class="text-center">You need a melon</p>
        </div>
    </div>

</div>

【问题讨论】：

你能包含你的 CSS 吗？更好的是，在 Fiddle 中包含问题示例

标签： html css twitter-bootstrap

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果需要，请使用您自己的媒体查询来执行相关任务。

在行中添加一个类：

 <div class="row myclass">

然后添加一个媒体查询来处理它在所需的宽度

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

类似上面的。

【讨论】：

【解决方案3】：

对于 Bootstrap 5，只需在包裹列的行上添加 gutter 类。

对于垂直间距：

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

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

对于水平间距：

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

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

继续编码！

【讨论】：