bootstrap 5 如果列为空，如何折叠列

Question

如果我的 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>

Answer 1

使用

col-auto

将列缩小至其内容的宽度。如果它不包含任何内容，它将“崩溃”。然而，这会导致相邻的列扩大（增长）

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

https://codeply.com/p/HfcKZmHE27