Bootstrap 4 全宽网格

Question

无论有多少列，我都无法弄清楚如何使网格扩展到容器的全宽

<div class="container">
  <div class="row">
     <div class="col-md-2 first"></div>
     <div class="col-md-9 second"></div>
  </div>
</div>

在上面的例子中显示 2 列内联和 .row 具有全宽。然而，如果我删除第一个 div（保持完全相同的代码），第二个 div 将改变它的位置到左边并保持原来的宽度。我需要它拉伸到容器的全宽。我需要这个的原因是因为我将有一些 php 条件表达式来阻止它显示，在这种情况下，我希望模板更改并且第二个 div 为全宽和位置在中间。

我找到了以下 CSS 的答案，它确实有效，但它也弄乱了响应式结构，我可能不得不对其进行修补，直到没有尽头：

CSS：

.row{
    display: table;
    width: 100%;
}

.first, .second{
    display: table-cell;
    float: none;
}

.second{
    width: 100%;
}

由于我是 Bootstrap 的新手，我想知道是否有任何内置类可以解决这个问题？谢谢

Answer 1

在这种情况下，只需将第一个 div 设为col-2，将第二个设为col。

col如果col-2缺少，将是 100% 宽度，但如果存在，col将填充剩余的列。

查看网格系统文档。