我在一行中有 3 列，每列都有一個嵌套行和另外 3 列。
.row
.col
.row
.col
.col <-- needs to be full height
.col
.row
.col
.col <-- needs to be full height
.col
.row
.col
.col <-- needs to be full height
如您所見，中間列沒有拉伸整個高度
我試過了align-items-stretch，h-100但沒有運氣。
任何幫助深表感謝！謝謝！
完整代碼在這里
<div class="container bg-secondary pt-5">
<div class="row">
<div class="col mx-5 px-5">
<div class="row">
<div class="col-12">
<img src="/imgs/1.jpg" alt="" />
</div>
<div class="col-12 bg-light">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
<div class="col mx-5 px-5">
<div class="row">
<div class="col-12">
<img src="/imgs/2.jpg" alt="" />
</div>
<div class="col-12 bg-light">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
<div class="col mx-5 px-5">
<div class="row">
<div class="col-12">
<img src="/imgs/3.jpg" alt="" />
</div>
<div class="col-12 bg-light">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
為此，您可以使用 Bootstrap 的 FlexBox 實用程式。
- 給
.row下.col.mx-5這些類：row flex-row h-100。 - 給出
.col-12應該很小的flex-shrink-1類。 - 給出
.col-12應該更長的h-100 flex-grow-1類。
完整代碼：
<div class="col mx-5 px-5">
<div class="row flex-row h-100">
<div class="col-12 flex-shrink-1">
<img src="/imgs/2.jpg" alt="" />
</div>
<div class="col-12 bg-light flex-grow-1 h-100">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
我已經檢查過它并且它有效。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/375582.html
下一篇：如何使懸停全寬