html - 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 将向左更改其位置并保持原始宽度.我需要它拉伸(stretch)到容器的整个宽度。我需要这个的原因是因为我会有一些 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-2，

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

查看 Grid system文档。