d-none d-md-block 是手机端隐藏 Bootstrap 列最稳妥写法：先全局隐藏，再从 ≥768px 恢复显示，确保所有手机（xs/sm）完全消失；d-none 必须前置以防覆盖。
手机端隐藏 Bootstrap 列必须用 d-none d-md-block 组合
单独写 d-md-none 或 d-sm-none 都不行——前者在中屏及以上才隐藏，手机端反而显示；后者只在 ≥576px 生效，而 iPhone SE（375px）、多数安卓小屏（412px）属于 xs 断点，压根不触发，元素始终可见。d-none d-md-block 是最稳妥的写法：先全局隐藏，再从 ≥768px（md）起恢复显示，确保所有手机（xs 和 sm）完全消失。
-
d-none必须放在前面，否则断点类可能被覆盖 - 两列要同级、包裹在同一
row或d-flex容器内，嵌套会导致类失效 - 别混用
col-sm-12这类栅格类——它只是视觉“堆叠”，DOM 仍在，会干扰焦点、无障碍和滚动行为 - 用 DevTools 拖动视口宽度验证，别只信预设机型；
xs实际对应 0–575.98px
table 表格里隐藏整列不能只加 td 类
给单个 td 加 d-none d-md-table-cell 只能局部生效，表头 th 和其他行的 td 仍存在，列不对齐、语义断裂。表格单元格默认是 display: table-cell，直接套 d-sm-none 会破坏布局（变成 display: none，但表格结构要求 cell 必须成对出现）。
- 正确做法是用 CSS
:nth-child()同步控制：@media (max-width: 767.98px) { .table th:nth-child(3), .table td:nth-child(3) { display: none; } } - 若列序固定，可加自定义属性如
data-hide-on-mobile，配合[data-hide-on-mobile] { display: none; }，比 JS 更轻量 - 别用
colgroup+col控制显隐——Bootstrap 不接管它的响应式逻辑，需额外补 CSS - 隐藏后若出现横向滚动条，检查是否漏了
th或某行td未同步加类
隐藏后功能入口必须显式补上
d-none 会让元素彻底退出渲染流和焦点流，如果被隐藏的是操作按钮、筛选控件或导航链接，小屏用户会直接找不到入口。这不是样式问题，而是交互缺失。
- 侧边栏类内容优先改用
offcanvas，它自带触控、键盘焦点管理和动画 - 工具按钮可收进 navbar 的
dropdown，或在顶部加浮动btn btn-sm入口 - 避免用
visually-hidden替代——它只是透明，仍占位、仍被屏幕阅读器读取，不符合“隐藏”语义 - 检查 tab 键顺序：
d-none元素不会进入焦点流，但若没补替代入口，键盘用户会跳过整段功能
IE11 和大屏手机需要特别处理
d-flex + flex-grow 在 IE11 中支持不全，左右栏容易错位或中间栏不占满；iPad Pro 12.9" 横屏宽度 1024px，已超默认 lg 断点（992px），但业务上可能仍算“移动端”。
- IE11 场景下，回退用 CSS Grid：
grid-template-columns: 200px 1fr 250px，兼容性好 - 需覆盖 iPad Pro 横屏，升断点到
d-none d-xl-block（≥1200px），而非卡在lg - 自定义断点虽可行，但要改 Sass 变量并重新编译，维护成本高，多数项目没必要
- 真正容易被忽略的是“谁控制尺寸”：flex、grid、栅格三者混用，在某个断点必然崩，选一种就到底
