Question

我对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的所有宽度？

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

我可以在另一个col内使用.col吗？

1 个答案: