如何在不换行的情况下在三个 Bootstrap 列之间添加边距？答案

【问题标题】：How can I add margin between three Bootstrap columns without them wrapping?如何在不换行的情况下在三个 Bootstrap 列之间添加边距？
【发布时间】：2021-06-21 23:31:02
【问题描述】：

.background-color {
  background-color: lightgrey;
  height: 200px;
  border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-4 background-color">1</div>
    <div class="col-4 background-color">2</div>
    <div class="col-4 background-color">3</div>
  </div>
</div>

所以我有三列，每列宽度为 4 列，每当我添加 m-3（周围的边距）时，它们就会因此中断，我该如何包含它们？所以他们三个都在同一条线上？

.background-color {
  background-color: lightgrey;
  height: 200px;
  border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-4 background-color m-3">1</div>
    <div class="col-4 background-color m-3">2</div>
    <div class="col-4 background-color m-3">3</div>
  </div>
</div>

【问题讨论】：

标签： html css bootstrap-4 margin

【解决方案1】：

我看到的唯一方法是嵌套其他元素。

    <div class="container">
      <div class="row">
        <div class="col-4"><div class="col-12 background-color m-3">1</div></div>
        <div class="col-4"><div class="col-12 background-color m-3">2</div></div>
        <div class="col-4"><div class="col-12 background-color m-3">3</div></div>
      </div>
    </div>

【讨论】：

内列类的意义何在？
它将允许控制列之间的间距。外列充当了一个不可见的约束来构建他想要的 3 列行，并且无论每一列内部发生什么都会保留 3 列，因为边距不是应用于它们而是应用于内部的。内层控制着他想要的外观，而不会破坏这 3 列的 flex 布局。
Thanks 感觉有点像一个肮脏的解决方法，但它完成了工作。

【解决方案2】：

Bootstrap 列系统（您可能知道）基于页面有 12 个名义列的想法。然后，您使用 col-* 类来指示每个元素占用这 12 列中的多少。因此，在本例中，您已声明每个元素占用 4 列，这意味着它们使用所有 12 个名义列。

问题在于 HTML 中的边距在元素的之外。因此，如果您有 3 个元素，每个元素使用 4 列，然后添加一些边距，那么您现在拥有的宽度超过了 12 列的可用宽度（这里是 12 列加上三批 m-3）。结果第三个元素没有足够的空间显示，流到下一行。

为避免这种情况，您可以使用内边距代替边距（因为内边距位于元素内部，因此您可以在保持网格宽度的同时获得视觉分离）。或者，您可以将元素的宽度减小到 col-3 并在其之外添加边距。但是，这可能意味着（取决于您的布局）它不使用全宽。

最终，如果您需要在页面上使用三个带有边距的元素，最好定义自己的类，而不是尝试使用 Bootstrap 类。框架在你使用它们时很棒，而在你使用它们时会很痛苦！

【讨论】：

是的，谢谢，那么使用 class="container-fluid" 而不是 class="container" 怎么样？
如果你愿意，你可以使用container-fluid，但是在你的布局中混合使用 flexbox 和 grid 可能会导致其他问题。您已经接受了涉及将结构嵌套在 HTML 中的答案，我知道，这将起作用，但不优雅（IMO）并增加了代码复杂性。正如我所说，就个人而言，我希望根据 Bootstrap 模板定义自己的类。

【解决方案3】：

.background-color {
  background-color: lightgrey;
  height: 200px;
  border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col background-color m-3 ">1
    </div>
    <div class="col background-color  m-3">2</div>
    <div class="col background-color  m-3">3</div>
  </div>
</div>

使用 col 代替 col-4

【讨论】：

澄清一下，这使得列使用弹性盒原则而不是百分比。