Question

因此，在阅读有关控制DIV中的列数时，我必须确保列数加起来为12。在下面的示例中，我需要两列，因此我指定每个DIV具有col-6。这可以正常工作，但是当我添加任何类型的边距（例如m-2）时，当行上明显有空间时，它将每个DIV堆叠在一起。

我是新手，所以有人可以告诉我我做错了吗？我期望有两列，每列有两个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具有边距和填充。

如果添加更多这些内容，则会中断流程。您应将边距/边距添加到div内的col中，而不要与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>

为什么在添加填充时引导表会堆栈DIV

1 个答案: