html - 尝试在Bootstrap 4中扩展行的宽度

如何将行的宽度扩展为其包含div的100％。我具有以下配置，并且无法使行扩展到父容器的宽度。使用w-100的BS4文档状态，但这不起作用。也不添加d-inline-block。谢谢。

CODEPEN

.container {
  width: 90%;
  border: 1px solid black;
  height: 200px;
}

.row {
  width: 100%;
  background-color: lightblue;
}

.col-12 {
  width: 100%;
  background-color: lightgrey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">CONTAINER
  <div class="row w-100">ROW
    <div class="col-12">COL-12</div>
  </div>
</div>

最佳答案

无需为类增加宽度。

.container {
  border: 1px solid black;
  height: 200px;
  width: 90%; /* optional not needed */

}

.row {
  background-color: lightblue;
}

.col-12 {
  background-color: lightgrey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">CONTAINER
  <div class="row">ROW
    <div class="col-12">COL-12</div>
  </div>
</div>

关于html - 尝试在Bootstrap 4中扩展行的宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58815599/