Bootstrap 4.6.1 中心列嵌套三列堆叠底部如何解决

• 子列堆叠在中心列底部是Bootstrap 4网格默认特性导致，并非嵌套写法逻辑错误：
  • 外层.row为flex容器，默认align-items: stretch，因此三个主列（左右边栏、中心列）会自动保持等高
  • 中心列（.col-sm-8）默认是普通块级元素，直接裸放文本+带负外边距的内部.row时，内部行没有纵向排布约束，就会贴在等高列的底部
• 无需放弃Bootstrap列类改用普通div，Bootstrap 4原生支持嵌套网格，调整结构和配套工具类即可实现需求。

1. 给中心列添加d-flex flex-column工具类，将其转为纵向弹性容器，内部元素会默认从上到下排列，不会沉底
2. 中心列内的顶部内容（示例中写“2”的位置）单独用块级元素包裹，和嵌套的子行.row分开
3. 如果需要三个子列自动撑满中心列除顶部内容外的剩余高度，给内部的子.row添加flex-grow-1类即可；不需要撑满高度直接删除该类，子列会按自身内容高度靠上排布

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="bg-secondary col-sm-2">
      1
    </div>
    <div class="bg-primary col-sm-8 d-flex flex-column">
      <!-- 中心列顶部内容单独包裹 -->
      <div class="py-2">
        2
      </div>
      <!-- 嵌套子行，添加flex-grow-1可撑满剩余高度 -->
      <div class="row flex-grow-1">
        <div class="bg-warning col-sm-4">
          2.1
        </div>
        <div class="bg-warning col-sm-4">
          2.2
        </div>
        <div class="bg-warning col-sm-4">
          2.3
        </div>
      </div>
    </div>
    <div class="bg-secondary col-sm-2">
      3
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Chao1920