Bootstrap 5+ 通过 flex-column 与断点类（如 flex-md-row）控制主轴方向切换，实现子元素水平→垂直堆叠；须作用于 display: flex 的直接父容器，配合 writing-mode 或 transform 实现竖排，注意高度、对齐、图标旋转及 gap/align-items 的断点重置。
用 flex-column + 断点类控制主轴方向切换
Bootstrap 5+ 不提供“文字竖排”专用类，但能通过弹性布局的断点控制实现水平→垂直的流向切换。核心不是旋转文字，而是让容器内子元素（如 <span>、<div>）从横向排列转为纵向堆叠。
常见错误是给文字本身加 flex-column，或试图在 <p> 上直接生效——它只对 display: flex 容器有效，且必须作用于**直接父容器**。
-
flex-column是基础竖排类，flex-md-row是中屏及以上恢复横排的关键，顺序不能颠倒：class="d-flex flex-column flex-md-row" - 若用
<ul class="nav">做步骤条，必须写成class="nav flex-column flex-md-row"，只加在<ul>上，别套在<nav>或<div>外层 - Bootstrap 4 用户需确认已启用 flex 工具类（默认开启），否则要手动加
style="display: flex" - 避免和
.text-truncate或.table-sm混用：它们可能强制white-space: nowrap，导致子项无法换行堆叠
表格表头在小屏下垂直显示要额外撑高
在 <th> 或 <td> 上用 writing-mode: vertical-rl 实现真竖排时，断点切换后常出现文字看不见、高度塌陷——这不是 CSS 写错了，而是竖排模式下单元格默认高度趋近于 0。
必须显式设置高度上下文，否则断点类再精准也白搭。
- 配合断点写内联样式更可靠：
<th class="d-none d-md-table-cell" style="writing-mode: vertical-rl; height: 80px;">日期</th> - 如果用 SCSS，建议在
@media (max-width: 767.98px)里统一重置：height: 60px; min-height: 60px; -
.text-center对竖排文字无效，改用text-align: center+vertical-align: middle（后者需父容器是table-cell或设display: table-cell） - 含图标（如
<i class="bi bi-filter"></i>）时，图标不会随文字旋转，得单独加transform: rotate(90deg)
writing-mode 和 transform: rotate() 别混着用
有人想“先用 writing-mode 竖排，再用 transform: rotate() 微调”，结果坐标系混乱、动画位移错乱、滚动失效——这是叠加两种不同渲染机制引发的底层冲突。
二者定位完全不同：writing-mode 改变文本流方向，transform 只是视觉旋转。选一个，别共存。
- 要语义正确、支持换行、适配屏幕阅读器 → 选
writing-mode: vertical-rl+text-orientation: mixed（注意 Safari 15.4 前不支持后者） - 要做垂直滚动、跑马灯、日志流 → 选
transform: rotate(-90deg)+translateX()动画，且容器必须固定宽高 +overflow: hidden - 移动端模糊？加
transform: rotate(-90deg) translateZ(0)强制 GPU 加速 - 字体大小统一用
px，避开rem/em在旋转缩放时的计算偏差
响应式竖排最易被忽略的坑：gap 和 align-items 的断点重置
从横排切到竖排后，gap 会从水平间距自动变成垂直间距，但 Bootstrap 的 gap-* 类在 flex column 下行为不稳定；align-items: center 在竖排时会让文字居中偏移，破坏阅读动线。
这些不是“写了断点类就自动好”的问题，必须主动覆盖。
- 别依赖
gap-4，在媒体查询里显式重写：@media (max-width: 576px) { .step-nav { gap: 1.5rem; } } - 竖排时文字默认居中，但用户需要左对齐 → 加
align-items: flex-start覆盖（尤其在<nav>或<ul>上） - 字体在小屏上撑开行高？在断点里加
font-size: 0.875rem或fs-sm - 第一步前面不该有箭头线 → 用
.nav-item:not(:first-child) .nav-link::before控制伪元素，别全局加
