Bootstrap4轮播加d-md-flex类后桌面端切片出现列宽布局偏移排查

• 为.testimonial-circle外层容器添加d-md-flex类后，该容器从块级元素变为Flex弹性容器，其直接子元素（内置栅格的.row、移动端显示的引导按钮<p>）会默认作为Flex项目沿横向主轴排布。
• Flex容器的默认项目规则是按内容自适应收缩宽度，不再像块级元素那样自动占满父容器100%可用宽度。而Bootstrap栅格系统的列宽计算（col-md-4、col-md-5等类的百分比宽度），完全依赖父容器（也就是.row）的100%宽度基准。
• 当.row被Flex规则压缩为内容自适应宽度后，内部栅格的宽度计算基准直接失效：切换到文本更短的第二张轮播幻灯片时，轮播区域的内容宽度收缩，会带动外层.row的Flex项目宽度同步变小，原本按固定百分比计算的列宽被重新换算，就出现了肉眼可见的列宽跳变、整体布局偏移。
• 额外的放大因素：.row本身自带Bootstrap内置的-15px左右负外边距，在Flex容器上下文里不会触发原本的宽度补偿逻辑，进一步加剧了偏移幅度。

方案1：最小改动修复Flex上下文冲突 #

保留外层d-md-flex align-items-md-center的垂直居中效果，仅需要给作为Flex项目的.row补上宽度强制规则：

• 把代码中原来的<div class="row align-items-center">修改为<div class="row align-items-center w-100">
• w-100类会强制.row在Flex容器内占满全部可用宽度，让内部栅格的宽度计算基准回到Bootstrap原生逻辑，彻底解决随轮播内容长短收缩的问题，垂直居中效果完全不受影响。

方案2：完全规避Flex上下文，复用原生栅格居中能力 #

如果不希望Flex规则干扰栅格系统，可以直接移除外层的两个Flex类，用Bootstrap栅格自带的垂直对齐能力实现同样的视觉效果：

• 移除.testimonial-circle上的d-md-flex align-items-md-center类
• 保留.row本身已有的align-items-center类，这个类会直接让row内部的标题列、轮播列在垂直方向居中对齐，视觉效果和外层Flex实现的居中完全一致
• 这种方式完全走块级文档流，栅格宽度计算不受任何干扰，从根源上避免切换幻灯片时的布局跳变。

方案3：补充轮播容器的最小宽度约束 #

无论选择哪种居中方案，都建议给轮播所在的列增加最小宽度约束，避免短文本幻灯片过度压缩布局：

• 给轮播外层的<div class="col-10 col-md-5 offset-1">追加min-width: 320px的自定义样式（或使用Bootstrap内置的min-md-0类消除Flex默认的内容收缩限制）
• 防止不同幻灯片文本长度差异引发的列宽自适应跳动。

注意：Bootstrap 4的Flex布局和原生栅格系统存在适配边界，当Flex容器直接包裹栅格.row元素时，必须显式给.row添加w-100类，否则一定会触发宽度计算异常。

内容的提问来源于stack exchange，提问作者J. Patrick Moran