Bootstrap 4多层嵌套行列布局异常：Line2未居Line1下方的解决方法

问题原因 #

Bootstrap 4的.media类默认是flex布局（display: flex），且默认flex-direction为row（横向排列）。你在.col-md-9 .media容器内直接放置了两个.row元素，这两个row会作为flex容器的子项，默认横向并排显示，这就是Line1和Line2没有垂直排列的核心原因。

而Bootstrap 5对.media组件的布局逻辑做了调整，默认会垂直排列内部元素，所以相同代码在Bootstrap 5中能正常显示。

修复方案（三种可选） #

方案1：给.media添加flex-column类 #

强制将.media容器的子元素改为垂直排列：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <h1>Title</h1>
  <div class="row">
    <div class="col-lg-12 my-3 p-3 bg-white rounded shadow-sm">
      <h5 class="border-bottom border-gray pb-2 mb-0">Test 2</h5>
      <div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
        <div class="col-md-3 media small">
          Some stuff
        </div>
        <!-- 添加flex-column类强制垂直排列 -->
        <div class="col-md-9 media flex-column">
          <div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
            Line 1
          </div>
          <div class="row">
            Line 2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

方案2：移除多余的.media类 #

如果该容器不需要Bootstrap的.media组件特性，直接去掉.media类即可：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <h1>Title</h1>
  <div class="row">
    <div class="col-lg-12 my-3 p-3 bg-white rounded shadow-sm">
      <h5 class="border-bottom border-gray pb-2 mb-0">Test 2</h5>
      <div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
        <div class="col-md-3 media small">
          Some stuff
        </div>
        <!-- 移除不必要的media类 -->
        <div class="col-md-9">
          <div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
            Line 1
          </div>
          <div class="row">
            Line 2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

方案3：给内部row添加w-100类 #

让每个row占满容器宽度，迫使flex容器自动换行：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <h1>Title</h1>
  <div class="row">
    <div class="col-lg-12 my-3 p-3 bg-white rounded shadow-sm">
      <h5 class="border-bottom border-gray pb-2 mb-0">Test 2</h5>
      <div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
        <div class="col-md-3 media small">
          Some stuff
        </div>
        <div class="col-md-9 media">
          <!-- 添加w-100类占满宽度 -->
          <div class="row pb-3 mb-0 lh-125 border-bottom border-gray w-100">
            Line 1
          </div>
          <!-- 添加w-100类占满宽度 -->
          <div class="row w-100">
            Line 2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Shan-x