仅使用Bootstrap4如何设置桌面及移动端的行间距与列间距

实现方案 #

直接用Bootstrap 4内置的响应式间距类即可实现需求，不需要额外编写自定义样式，可自动适配所有设备断点：

• 两行之间的15px间距：给第二个.row添加上边距类mt-3即可（Bootstrap默认m-3对应1rem，在默认根字体16px的场景下约为16px，如需要严格15px可自定义spacing变量，默认场景下m-3是最贴近需求的原生最优解）
• 第二行两列的移动端堆叠间距：给第一列添加mb-3 mb-sm-0类，即可实现移动端堆叠时列之间的底部间距，平板及以上断点会自动取消该底部间距，避免并排展示时出现多余留白。

修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gap</title>
  <link 
   rel="stylesheet"         
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
   integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin="anonymous" />
</head>
<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-12 p-3" style="
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      ">
        B
      </div>
    </div>
    <!-- 添加上边距实现两行之间的间距 -->
    <div class="row mt-3">
      <!-- 添加响应式底部间距，移动端生效，平板及以上自动取消 -->
      <div class="col-xs-12 col-sm-6 p-3 mb-3 mb-sm-0" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        A
      </div>
      <div class="col-xs-12 col-sm-6 p-3" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        C
      </div>
    </div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Subrato Pattanaik