Bootstrap栅格布局row对齐错位、异常换行问题求解

布局错位是因为违反了Bootstrap栅格系统的两个强制层级规则：

• 所有带col-*类的栅格列，必须是.row类容器的直接子元素。你的代码中最外层container-fluid容器下直接放置了两个col-md-6列，缺少外层包裹的.row，会导致栅格的负边距、内边距计算完全异常，列排布错位。
• 所有带.row类的行容器，直接子元素只能是col-*类的栅格列，不能直接嵌套其他.row。你的代码中右侧第二组两个文本块所在的.row，直接作为上层.row的子元素存在，没有先包裹一层占满宽度的列容器，会触发row自带的负边距偏移，把元素挤到错误的行位置。

<div class="container-fluid" style="background-color: #DCDCDC; min-height: 400px;">
    <!-- 新增外层row包裹顶级列，修正第一层栅格层级 -->
    <div class="row">
        <div class="col-md-6 py-5">
            <div class="card mb-3">
              <img class="card-img-top" src="https://images.unsplash.com/photo-1656792566083-80e5dd4995f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Card image cap" width="250" height="150">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
        </div>

        <div class="col-md-6 py-5">
            <div class="row">
                <div class="col-md-6">
                    <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>

                <div class="col-md-6">
                    <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
                <!-- 嵌套row前新增全宽列容器，修正嵌套栅格层级 -->
                <div class="col-12">
                    <div class="row">
                        <div class="col-md-6">
                            <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        </div>
                        <div class="col-md-6">
                            <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        </div>
                    </div>
                </div>            
            </div>
        </div>
    </div>
</div>

• 把原容器的固定高度height: 400px改为min-height: 400px，避免内容过多时溢出容器导致布局错乱
• 右侧列补充和左侧一致的py-5类，保证左右两列的上下内边距对齐
• 把内部自动宽度的col改为固定半宽的col-md-6，避免内容长度差异导致列宽被挤压，保证两列等宽效果稳定

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