为什么在添加填充时bootstrap表堆栈DIVs

Question

因此，当阅读有关控制DIV中的列数时，我必须确保列数之和为12。在下面的示例中，我想要两列，所以我指定每个DIV都有col-6。这是正确的，但当我添加任何类型的边距时，例如m-2，它会将每个DIV堆叠在彼此的顶部，而该行上显然有空间。

我是bootstrap的新手，所以有人能说出我哪里做错了吗？我期望的是两列，每列有两个DIV部分。我只想要等效单元格之间的间距，但是在DIV行下面列出了许多DIV部分。

    <div class="row">
        <div class="col-6 m-2 p-2">
            <h4>Div 1</h4>
        </div>
        <div class="col-6 m-2 p-2">
            <h4>Div 2</h4>
        </div>
        <div class="col-6 m-2 p-2">
            <h4>Div 3</h4>
        </div>
        <div class="col-6 m-2 p-2">
            <h4>Div 4</h4>
        </div>
    </div>

更新:似乎您不应该在指定间距的同一个DIV标记中指定您想要的列数。

<div class="row">
    <div class="col-6">
        <div class="m-2 p-2"><h4>Div 1</h4></div>
    </div>
    <div class="col-6">
        <div class="m-2 p-2"><h4>Div 2</h4></div>
    </div>
    <div class="col-6">
        <div class="m-2 p-2"><h4>Div 3</h4></div>
    </div>
    <div class="col-6">
        <div class="m-2 p-2"><h4>Div 4</h4></div>  
    </div>
</div>

Answer 1

col和row有边距和填充。

如果您添加更多的它们，它将中断流。您应该将边距/填充添加到col中的div中，而不是在col的同一级别。

请在附件中找到我试图解释的一小段内容：

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
      <div class="col-6" style="background:green;">
        <h2 class="text-center">col A</h2>
        <div class="row">
          <div class="col-6">
            <div class="m-2 p-2" style="background:red;">col AA</div>
          </div>
          <div class="col-6">
            <div class="m-2 p-2" style="background:yellow;">col AB</div>
          </div>
        </div>
      </div>
      <div class="col-6" style="background:blue;">
      <h2 class="text-center">col B</h2>
        <div class="row">
          <div class="col-6">
            <div class="m-2 p-2" style="background:cyan;">col BA</div>
          </div>
          <div class="col-6">
            <div class="m-2 p-2" style="background:orange;">col BB</div>
          </div>
        </div>
      </div>
  </div>
</div>

​