在 Bootstrap 4 中，如何让行或列在父容器内扩展到完整高度？

Question

尝试获取一行（文章标签）以转到父容器的底部。基本布局如下所示：

<div class='row mb-3'>
    <div class='col-3'> [ thumbnail image goes here ]</div>
    <div class="col-9'>
      <div class='row'>
        <div class='col-12>Article title</div>
      </div>
      <div class='row'>
        <div class='col-12>Article excerpt</div>
      </div>
      <div class='row'>
        <div class='col-12>Tags: tag1, tag2, tag3</div>
      </div>
    </div>
</div>

摘录行中将包含不同数量的文本。如何使标签行位于 col-9 列的底部？

@Zim 下面的答案似乎很接近，但是中间的列应该扩展到父容器的高度（带有缩略图的行），而是整个页面的高度：

标签行位于页面窗口底部。当输出多行时，标签行位于下一行内容的下方。

Answer 1

1. 在父行上使用min-vh-100andflex-column
2. 用于flex-grow-1填充高度

<div class="container-fluid">
    <div class="row">
        <div class="col-3"> [ thumbnail image goes here ]</div>
        <div class="col-9">
            <div class="row flex-column min-vh-100">
                <div class="col-12">Tags: tag1, tag2, tag3</div>
                <div class="col-12 flex-fill">Article title</div>
                <div class="col-12">Article excerpt</div>
            </div>
        </div>
    </div>
</div>

编辑

根据评论，增加相邻列的高度而不是视口高度......

   <div class="row">
        <div class="col-3 bg-warning">
            [img]
        </div>
        <div class="col-9">
            <div class="row flex-column h-100">
                <div class="col flex-grow-0">Tags: tag1, tag2, tag3</div>
                <div class="col flex-fill bg-success">Article title</div>
                <div class="col flex-grow-0">Article excerpt</div>
            </div>
        </div>
   </div>

演示