根据同级div的可用性调整div的宽度

Question

我在同一行上有2个div。 当右边的div2被删除时，我希望左边的div1占据全角。

<div class="row">
    <div class="col-sm-6" style="background-color:lavender;">Div1/div>
    <div class="col-sm-6" style="background-color:lavenderblush;">Div2</div>
  </div>

我正在使用引导程序来实现网格和响应性。 我有什么办法可以通过Bootstrap实现它吗？

Answer 1

您可以编写一个CSS选择器，将col-sm-6的宽度设置为100％，它既是第一个孩子又是最后一个孩子

.row .col-sm-6:first-child:last-child {
    width:100%
}

Answer 2

如果您正在使用bootstrap4，则可以跳过列大小声明，而只是这样做。

<div class="row">
    <div class="col-sm" style="background-color:lavender;">Div1/div>
    <div class="col-sm" style="background-color:lavenderblush;">Div2</div>
</div>