如何在 Bootstrap 4 中用一行填充剩余高度？

Bootstrap 4：用一行填充剩余高度

在 Bootstrap 4 中实现跨越剩余可用高度的行可能具有挑战性，但是这是可能的。让我们探索如何使用 flex-grow-1 类来完成此任务。

当前问题和原因

在您提供的代码中，您使用 h-100 来设置行和嵌套列的高度。但是，这种方法会在屏幕底部创建空白区域，因为嵌套列（带有蓝色行）在父列内扩展。

解决方案：利用 flex-grow-1

Bootstrap 4.1 引入了 flex-grow-1 类，该类为元素分配内部大小 0，然后将其增长以填充任何元素剩余空间。在这种情况下，我们会将其应用到需要拉伸的行。

修订后的代码

这是修订后的代码片段：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>
<p><strong>说明</strong></p>
<p>修改中代码：</p>
<ul>
<li>父列（红色背景）的高度使用 h-100 设置为 100%。</li>
<li>嵌套列用 d- 包裹在 div 中flex flex-column 类，它将其子项排列成垂直列，并允许它们在可用高度内增长。</li>
<li>第二行（蓝色背景）现在应用了 flex-grow-1 类。这指示该行扩展并填充其父列内的任何剩余高度。</li>
</ul>
<p>因此，蓝色行现在扩展以占据红色列内所有未使用的空间，从而达到所需的效果填充剩余高度。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

以上是如何在 Bootstrap 4 中用一行填充剩余高度？的详细内容。更多信息请关注PHP中文网其他相关文章！