如何仅使用 bootstrap 4 在桌面和移动设备上给出列间隙？答案

【问题标题】：How to give column gap on desktop and mobile devices using bootstrap 4 only?如何仅使用 bootstrap 4 在桌面和移动设备上给出列间隙？
【发布时间】：2021-11-13 11:51:15
【问题描述】：

我需要在两行和两列之间留出 15px 的间距。我不知道如何仅使用引导程序来解决台式机和移动设备上的差距。与边距有关，但不知道理想的方法。

对于第 2 行，我有两列将在大于平板设备的设备上并排显示，并且在移动设备上将显示在另一列下方。我很难仅在移动设备中设置间隙。

<!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">
      <div class="col-xs-12 col-sm-6 p-3" 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>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

在 B4 中稍作修改即可轻松实现您的需求。在那个版本中，向columns 添加任何边距会完全破坏布局。解决方法是不为其添加边距，而是添加一个内部封闭 div。哪个工作相同。您的代码因此变为：

<!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 mb-3">
                <div class="col-12 p-3" style="background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;">
                    B
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 px-0">
                    <div class="inner p-3 mb-3 mb-sm-0 mr-sm-3" style="color: #004085; background-color: #cce5ff; border: 1px solid #b8daff;">
                        A
                    </div>
                </div>
                <div class="col-sm-6 px-0">
                    <div class="inner p-3" style="color: #004085; background-color: #cce5ff; border: 1px solid #b8daff;">
                        C
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

JSFiddle

使用 B5 中 row 上的 g-* 类可以非常轻松地完成相同的操作。

编辑：您还应该记住，Bootstrap 中的*-3 默认为 16 像素。这里没有任何东西（默认情况下）会给你 15px。您需要添加一个自定义类，或者如果您使用的是 SASS，您可以在 Bootstrap 的边距实用程序中添加另一个值，如 15（值为 15px），这将为您提供类似 mb-15 的内容相当于margin-bottom: 15px;。 Utilities API

【讨论】：

【解决方案2】：

要使间隙出现在移动设备上，请使用mb-4 mr-4，如果您想在大屏幕上隐藏间隙，请使用mb-md-0 mr-md-0或您想要的任何其他断点。

【讨论】：

谢谢！！对于第二行，我需要桌面的水平间隙和移动设备的垂直间隙
仅在桌面上显示水平间隙mr-0 mr-lg-4，并仅在移动设备上显示垂直间隙mr-4 mr-lg-0。结合两者以获得您想要的行为。我假设桌面是指lg 断点。
您能分享一下您的解决方案示例吗？我确实尝试过，但没有得到想要的结果。
对不起，我的评论有误，垂直间隙类应该是mb-4 mb-lg-0jsfiddle.net/mwrpLc8z/9
您展示的示例不适用于网格布局。是的，它可以与两个不同的 div 一起正常工作。

【解决方案3】：

我不知道这是否有效。基本上，我只是将margin-bottom 添加到container B 并将margin-top 添加到container A & C。然后，我将flex 用于两列。我没有使用边距，而是使用空容器作为间隙。缺点是它不完全是 `15px。

参考资料：

<!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">
    <div class="row">
      <div class="col-12 p-3 mb-4" style="
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      ">
        B
      </div>
    </div>

    <div class="row d-flex justify-content-sm-between mt-2">
      <div class="col-xs-12 col-sm p-3" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        A
      </div>

      <div class="col-sm-1 p-3">
      </div>

      <div class="col-xs-12 col-sm p-3" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        C
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：