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

Question

.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>

Answer 1

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

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

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

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

Answer 2

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

    <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>

Answer 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

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

How can I add margin between three Bootstrap columns without them wrapping?

html

css

margin

bootstrap-4