必须用 d-none d-lg-block 组合实现小屏彻底隐藏，因为 d-lg-block 仅在 ≥992px 设为 block，不控制小屏 display；d-none 先全局清空，再由断点类反向激活，且两列须同级置于 row 内。
为什么只加 d-lg-block 小屏下还是显示
因为 d-lg-block 只在 ≥992px 时把元素设为 display: block，但它不干预小屏下的 display 值——小屏下元素继承父容器的 display（比如 flex 或 block），所以依然渲染、占位、可聚焦。
真正要“彻底消失”，必须先用 d-none 全局清掉 display，再用断点类反向激活。
正确写法：用 d-none d-lg-block 组合
这是 Bootstrap 4/5 的标准解法，不是可选项，是必须项：
-
d-none放前面，确保所有尺寸下默认不渲染 -
d-lg-block放后面，在 ≥992px 时恢复为块级显示 - 两列必须同级、包裹在同一
<div class="row"> 内，不能嵌套或错层 <li>别混用 <code>col-xs-12或col-sm-6——这些栅格类在小屏下仍会参与布局计算，导致容器高度异常或 margin 错位
示例结构：
<div class="row"> <div class="col-lg-6 d-none d-lg-block">左栏</div> <div class="col-lg-6 d-none d-lg-block">右栏</div> </div>
小屏隐藏后功能入口怎么补
如果这两列里有按钮、表单或导航链接，小屏下直接消失会导致用户找不到操作入口：
- 不要指望用户“猜”功能藏在哪——显式提供替代入口，比如收进 navbar 的
dropdown或offcanvas - 避免用
visually-hidden替代d-none，前者仍被屏幕阅读器读取，但视觉不可见，不符合“隐藏”语义 - 若左右栏是侧边工具栏，优先改用
offcanvas组件，它自带触控交互和键盘焦点管理 - 检查 tab 键顺序：
d-none元素不会进入焦点流，但若小屏下没补入口，键盘用户会直接跳过整段功能
断点选 lg 还是 xl？
默认 d-lg-block 对应 ≥992px，能覆盖多数桌面显示器，但 iPad Pro 12.9" 横屏宽度是 1024px，也属于 lg 断点。如果业务明确要求“连大屏平板也要隐藏”，就得升级断点：
- 用
d-none d-xl-block（≥1200px），避开 iPad Pro 横屏 - 别用
d-md-block（≥768px）——它会在 iPad 竖屏（768px）就显示，反而暴露给移动端 - 真要精细控制，可自定义断点，但需同步改 Sass 变量并重新编译 CSS，维护成本高
实际项目中，绝大多数场景用 d-none d-lg-block 就够了；纠结断点前，先用 DevTools 拖动视口宽度验证真实生效区间。
