订单详情模块应采用Bootstrap 5语义化栅格分三区布局：顶部状态栏（badge+垂直progress）、主体信息区（dl展示地址/联系人）、底部操作区；商品用table-responsive表格右对齐价格；字段顺序需按角色动线排列。
订单详情模块的布局，核心是「信息分组清晰 + 操作路径短 + 移动端可读不挤」。直接套用通用卡片或表格容易导致关键字段被埋、状态变更按钮找不到、地址和商品混排难定位——这些问题在真实后台中高频出现。
用 Bootstrap 5 的 row + col 做语义化分栏，别堆 div
Bootstrap 的栅格系统不是用来“填满整行”的，而是按信息逻辑切分视觉区域。订单详情至少要拆成三块：顶部状态栏、主体信息区（收货 + 商品）、底部操作区。每个区块用独立的 row 包裹，内部再用 col-md-6 或 col-lg-4 控制宽度，避免用固定像素或 float。
-
col类名必须配合row使用，单独加col-12在某些旧版 Bootstrap 中会失效 - 移动端优先：默认用
col-12，平板起用col-md-6，桌面用col-lg-4，不要反着写 - 避免嵌套过深：比如在
col里再套row>col>row，超过两层就该考虑用 CSS Grid 替代
订单状态用 badge + progress 组合，别只靠颜色区分
纯靠红/绿/灰颜色表示「已发货」「待付款」「已取消」，对色弱用户不友好，也容易在暗光屏幕下误判。Sneat 模板里推荐的方案是：badge 显示当前状态文字，下方跟一个 progress 条标注流程位置（如「下单 → 支付 → 配货 → 发货」），进度条上用 position-relative 叠加小圆点标记当前节点。
- 别把状态文本硬编码进 HTML，应从后端返回
status_code（如paid、shipped），前端用映射表转为可读文案 -
progress的aria-valuenow必须同步更新，否则屏幕阅读器无法识别当前步骤 - 移动端显示时，进度条建议折叠为垂直方向，用
flex-column+text-center对齐
商品列表用 table 而非 card，但需加 table-responsive
订单里的商品少则 1 件，多则 20+ 件，每件含 SKU、规格、单价、数量、小计。用卡片堆叠会导致横向滚动困难、列宽不一致、合计行难对齐。Bootstrap 的 table 天然支持列冻结（sticky-header）、斑马纹（table-striped）和响应式包裹（table-responsive），比手写 Flex/Grid 更稳。
立即学习“前端免费学习笔记（深入）”；
- 必须给
table加table-sm类，否则行高过大，移动端单行占屏过高 - 价格类数字右对齐：
class="text-end"，但注意中文标点（如 ¥）要放在数字前，避免换行错位 - 移动端小屏下，
table-responsive会生成横向滚动条，此时需确保th和td内容不换行（加white-space: nowrap）
地址与联系人信息用 dl + dt/dd，别用 form-group
收货地址、电话、备注这些是非表单场景，用 form-group 会引入多余 margin、label 样式和 focus 状态，干扰阅读流。HTML5 的 dl（definition list）语义最贴切：每个字段是 dt（term），值是 dd（definition），天然支持上下结构、缩进清晰、无障碍友好。
-
dd默认有 margin-left，若想左对齐，加mb-0并手动设margin-left: 0 - 手机号、邮箱等敏感字段，前端展示时建议做简单脱敏（如
138****1234），后端不传明文 - 如果地址字段超长（如含详细楼栋号），用
text-wrap控制自动换行，禁用text-nowrap
真正难的不是怎么画出来，而是字段顺序是否符合运营人员查看习惯——比如财务关注支付时间与金额，仓管关注物流单号与发货时间，客服关注用户留言与异常标记。布局之前，先拉一次真实订单处理流程，把字段按角色动线排好序，比调一百遍样式都管用。
