Bootstrap 有一個類flex-fill，您可以在 a 下使用一系列兄弟姐妹flex-row來強制它們均勻地填充行的整個寬度，即。如果它們的內容不是太大，它們的寬度都將相同。
我想要相同的行為，但在垂直方向，即。一個flex-column。但是，Bootstrap 似乎不支持flex-column's 的相同 flex 行為。我都試過了flex-fill，flex-grow-1但似乎都沒有任何效果。如果您檢查以下代碼段，您可以看到兩列具有相同的高度，但 4 高的列沒有增長以填充剩余空間。
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row">
<div class="flex-column">
<div class="flex-fill border border-dark">1/8</div>
<div class="flex-fill border border-dark">2/8</div>
<div class="flex-fill border border-dark">3/8</div>
<div class="flex-fill border border-dark">4/8</div>
<div class="flex-fill border border-dark">5/8</div>
<div class="flex-fill border border-dark">6/8</div>
<div class="flex-fill border border-dark">7/8</div>
<div class="flex-fill border border-dark">8/8</div>
</div>
<div class="flex-column">
<div class="flex-fill border border-dark">1/4</div>
<div class="flex-fill border border-dark">2/4</div>
<div class="flex-fill border border-dark">3/4</div>
<div class="flex-fill border border-dark">4/4</div>
</div>
</div>我假設 Bootstrap 本身并不支持這一點，但是正常的 flexbox 語法是什么讓它們以這種方式均勻地填充可用高度？
uj5u.com熱心網友回復：
只需d-flex在列上使用來設定它們的display屬性。它不是遺傳的。
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<div class="flex-fill border border-dark">1/8</div>
<div class="flex-fill border border-dark">2/8</div>
<div class="flex-fill border border-dark">3/8</div>
<div class="flex-fill border border-dark">4/8</div>
<div class="flex-fill border border-dark">5/8</div>
<div class="flex-fill border border-dark">6/8</div>
<div class="flex-fill border border-dark">7/8</div>
<div class="flex-fill border border-dark">8/8</div>
</div>
<div class="d-flex flex-column">
<div class="flex-fill border border-dark">1/4</div>
<div class="flex-fill border border-dark">2/4</div>
<div class="flex-fill border border-dark">3/4</div>
<div class="flex-fill border border-dark">4/4</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/451820.html