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将填充其余列。

查看Grid system文档。

Answer 2

我不确定你为什么要使用display:table。只需使用Bootstrap 4 auto-layout grid，如果第一个丢失/隐藏，第二个将填充宽度。

“flexbox网格列的自动布局也意味着您可以设置宽度一列并让兄弟列自动调整大小它“。

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

Answer 3

我有同样的问题。您可以通过设置行（边距：0px）（通过css文件中的样式属性或id）和设置行（填充：0px）至col（通过css文件中的style属性或id）来修复它