我可以将 .col 放在另一个 col 中吗？ [复制]答案

【问题标题】：Can I have .col inside of another col? [duplicate]我可以将 .col 放在另一个 col 中吗？ [复制]
【发布时间】：2019-07-26 08:18:51
【问题描述】：

我对 Bootstrap 列有疑问。我有一列有一列（.col-12）。在此列中，我有 2 列 (.col-2)，但 .col-2 使用 .col-12 的所有宽度。

.container {
  //border: 1px solid black;
  height: 100vh;
}
.prueba {
  height:  calc(30%);
  //border: 1px solid red;
}
.fila {
  height: calc(100%);
  //border: 1px solid purple;
}
.col-2 {
  height: calc(100%);
  border: 1px solid green;
}

<div class="container">
  <div class="row prueba">
    <div class="col-12 fila">
      <div class="col-2"></div>
      <div class="col-2"></div>
    </div>
  </div>
</div>

为什么 .col-2 使用 .col-12 的所有宽度？

【问题讨论】：

列应始终位于一行内。在 col-12 中添加一行并将其他列放在该行内。

标签： html css bootstrap-4

【解决方案1】：

只需将它们包装在另一个 .row 中即可。

.container {
  height: 100vh;
}

.col-2 {
  border: 1px solid green;
  min-height: 64px;
}

<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-12">
      <div class="row">
        <div class="col-2"></div>
        <div class="col-2"></div>
      </div>
    </div>
  </div>
</div>

【讨论】：