Bootstrap 动态引导格网列大小

bwleehnv  于 2023-04-18  发布在  Bootstrap
关注(0)|答案(1)|浏览(123)

我使用Bootstrap网格,有两列:

<div class="col-md-7 no-padding">
... content 1 ...
</div>
<div class="col-md-5">
... content 2 ...
<div>

我想让第一列col-md-7动态:如果最近的列col-md-5是空的,我想让col-md-7作为全宽(col-md-12)。
如何动态地做到这一点?

aiqt4smr

aiqt4smr1#

您可以使用选择器:has()。例如,像这样(我不使用引导,只是演示的想法):

.row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-gap: 30px;
}

.col-md-7:has(+ .col-md-5:empty) {
    grid-column: span 2;
}

.col-md-7,
.col-md-5 {
  padding: 15px;
  border: solid 1px #ccc;
}

.col-md-5:empty {
  display: none;
}
<div class="row">
  <div class="col-md-7">
    ... content 1 ...
  </div>
  <div class="col-md-5">
    ... content 2 ...
  </div>
  <div class="col-md-7">
    ... content 3 ...
  </div>
  <div class="col-md-5"></div>
</div>

相关问题