根據同級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>