如何使 Bootstrap 4 行扩展以填充剩余高度？
- Patricia Arquette原创
- 2024-11-17 05:23:03537浏览
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>说明：
- Flexbox 容器： 我们添加了 d-flex 和 flex-column将类添加到红列以启用 Flexbox
- 固定行：我们为紫色行（第 1 行）设置固定高度以防止其扩展。
- Flex-grow： 我们将 flex-grow-1 类应用于蓝色行（第 2 行），使其增长并填充剩余的行高度。
通过这些调整，蓝色行现在将占据红色列内的剩余可用空间。此方法可确保有效利用整个页面高度，而底部不会有任何额外的空白。