bootstrap 5如果列是空的，如何折叠列

nfzehxib 于 11个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(113)

如果我的2个div列是空的，我如何让它垂直折叠（不占用页面上的空间）。所以如果第2列是空的，第3列应该滑过并填充那个空间。

<div class="row">
  <div class="col">first col</div>
  <div class="col">collapse this if empty</div>
  <div class="col">third col</div>
</div>

字符串

1条答案

使用col-auto将列缩小到其内容的宽度。如果它不包含任何内容，它将“折叠”。但是，这将导致相邻列扩展（增长）

<div class="row">
        <div class="col">first col</div>
        <div class="col-auto"></div>
        <div class="col">third col</div>
    </div>