如何使Bootstrap包裹的列拉伸到全宽

Question

我在codepen上有简单的代码示例，但这是方便的标记：

<div class="container my-container">
  <div class="row m-row justify-content-between">
    <div class="col-2 my-col">One of three columns</div>
    <div class="col-5 my-col">One of three columns</div>
    <div class="col-5 my-col">One of three columns</div>
  </div>
</div>

和一些自定义CSS：

.my-row {
  justify-content: stretch;
}

.my-col {
  background: yellowgreen;
  border: 1px gray solid;
  align-self: stretch;
}

使用更大的屏幕宽度，我得到的很好：

但是当我设置小尺寸时，例如无需调整浏览器窗口的大小，您可以将my-container的宽度设置为150px只是为了演示会发生什么情况

.my-container {
  width: 150px;
}

然后包装项目，得到以下结果：

我如何制作包装好的物品以填满其余宽度？

Answer 1

我想您应该使用引导程序断点see here under Grid options。

因此，如果要使它们成为容器的全宽度，请使用col-12。

 <div class="container my-container">
  <div class="row m-row justify-content-between">
    <div class="col-12 col-sm-2">One of three columns</div>
    <div class="col-12 col-sm-5">One of three columns</div>
    <div class="col-12 col-5">One of three columns</div>
  </div>
</div>

Answer 2

您可以将.col-md-*或.col-sm-*类用于小型设备中的全宽度内容，而不是.col类。显示完整的代码段并调整其大小。

.my-row {
  justify-content: stretch;
}

.my-col {
  background: yellowgreen;
  border: 1px gray solid;
  align-self: stretch;
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  
<div class="container my-container">
  <div class="row m-row justify-content-between">
    <div class="col-md-2 my-col">One of three columns</div>
    <div class="col-md-5 my-col">One of three columns</div>
    <div class="col-md-5 my-col">One of three columns</div>
  </div>
</div>

注意：如果您更改.col-**-*的宽度，则您的.container的班级宽度将无法更改。

谢谢...