我怎样才能在没有包装的情况下在三个引导栏之间增加边距？

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

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

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

引导列系统(您可能知道)是基于这样的思想，即页面有12个概念列。然后，使用col*类来指示每个元素所占的12列中有多少列。因此，在本例中，您已经声明每个元素占4列，这意味着它们使用了所有12列。

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

为了避免这种情况，您可以使用填充而不是边距(因为填充位于元素内部，则在坚持网格宽度时会得到可视的分隔)。或者，您可以将元素的宽度缩小到col-3，并在此范围外添加您的边距。然而，这可能意味着(取决于您的布局)它没有使用完整的宽度。

最后，如果您需要在页面上使用三个带边距的元素，最好是定义您自己的类，而不是尝试使用Bootstrap类。当你和他们一起工作时，框架是伟大的，当你与他们对抗时，框架是痛苦的！

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>

​

用二醇代替二醇四。