如何仅使用 bootstrap 4 在桌面和移动设备上提供列间距？

Question

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

对于第 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>

Answer 1

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

Answer 2

我不知道这是不是一个有效的方法。基本上，我只是将 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>

Answer 3

只要在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-* classes 可以很容易地完成同样的操作。

编辑：您还应该记住 Bootstrap 中的 *-3 默认为 16px。这里没有任何东西（默认情况下）会给你 15px。您需要添加自定义 class，或者如果您使用的是 SASS，您可以向 [=28] 中的边距实用程序添加另一个值，例如 15（值为 15px） =]，这会给你类似 mb-15 的东西，它等同于 margin-bottom: 15px;。 Utilities API

如何仅使用 bootstrap 4 在桌面和移动设备上提供列间距？

How to give column gap on desktop and mobile devices using bootstrap 4 only?

html

css

bootstrap-4