如何使 Bootstrap 4 行扩展以填充剩余高度？

Bootstrap 4 - 扩展行以填充剩余高度

在本文中，我们将探讨如何扩展行以填充剩余高度使用引导程序4.

问题：

您可能会遇到这样的情况，您希望将一行拉伸以占据剩余的可用高度。尽管尝试使用 h-100 类，屏幕底部仍出现过多空白。

解决方案：Bootstrap 4.1 flex-grow-1 类

Bootstrap 4.1引入了 flex-grow-1 类，它允许元素扩展以填充其父容器内的剩余空间。通过利用这个类，我们可以达到我们想要的结果。

这是修改后的代码片段：

<br>html,body{height:100%;} <p>.bg-purple {<br> 背景： rgb(48,0,50);<br>}<br>.bg-gray {<br>背景：rgb(74,74,74);<br>}<br>.bg-blue {<br>背景：rgb(50,101,196);<br>}<br>.bg-red {<br> 背景：rgb(196,50,53);<br>} </p><p></p><div> <div class="row justify-content-center h-100"> <pre class="brush:php;toolbar:false"><div>