垂直居中Flexbox/Bootstrap列中不使用display:contents实现小屏可选文本后缀排布的方法

• 当前布局异常的核心原因：设置了d-flex的Flex容器，会将所有直接处于文档流中的内容（包括无包裹纯文本生成的匿名Flex项、独立的<span>元素）单独识别为Flex布局项。
• 无论<span>本身是内联元素，只要它是Flex容器的直接子项，就会被Flex规则强制独立排版，脱离普通文本流的自然衔接关系，无法和前置标题文字顺排。
• 之前用display: contents实现效果，本质是让span本身不生成独立布局盒子，仅保留内部文本参与排布，但该属性的浏览器兼容覆盖度较低。

只需要将原本直接裸露在Flex容器内的标题文本、小屏后缀span，统一包裹在一个普通块级元素中即可。

调整后的完整代码：

<div class="row">
   <div class="col-2">
      <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="100" height="300">
   </div> 
   <div class="col d-flex align-items-center">
      <!-- 新增一层包裹容器，成为Flex容器下唯一的Flex布局项 -->
      <div>
        Title text Title Text
        <!-- 移除display:contents，仅保留小屏展示的控制类即可 -->
        <span class="d-lg-none">(Optional column is here on small devices)</span>
      </div>
   </div>
   <div class="col-2 d-none d-lg-flex align-items-center">
      Optional column
   </div>
</div>

方案有效性说明 #

• 新增的包裹<div>是Flex父容器的唯一直接子项，会被识别为单个Flex项，配合父级align-items: center规则，自动实现垂直居中的效果，和原有的排布逻辑完全一致。
• 包裹<div>内部走完全普通的HTML块级文本流，前置标题文本、后缀span都是常规内联内容，会按照自然文本流顺序顺排，不需要使用特殊的display属性，不存在兼容性问题。
• 原本d-lg-none的小屏适配逻辑完全保留：当屏幕尺寸达到lg断点时，span会被自动隐藏，不会干扰大屏下的标题排版。

若需要让标题内容撑满列的全部宽度、自动适配换行，可以给包裹容器补充w-100类，修改为<div class="w-100">即可，不会影响原有垂直居中的效果。

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