在 Bootstrap 4/5 中，用 d-{breakpoint}-none 配合 d-{breakpoint}-block 类可实现断点级列隐藏，如 d-md-none d-lg-block；Bootstrap 3 用 hidden-sm 等类，但会完全移除元素；visibility: hidden 可隐而不占位，需手动清空 padding 和 width 以避免残留空白。
用 invisible 类在 Bootstrap 4/5 中隐藏特定断点下的 col
bootstrap 4 和 5 不再提供 hidden- 系列类（如 hidden-sm），改用响应式可见性工具类。想在某个屏幕尺寸下隐藏某一个 col，直接加对应断点的 d-none 或 d-{breakpoint}-none 即可。
比如：想在 md 及以下屏幕隐藏第 2 个 col，保留它在 lg 及以上显示：
<div class="row"> <div class="col">始终显示</div> <div class="col d-md-none d-lg-block">仅 lg+ 显示</div> <div class="col">始终显示</div> </div>
-
d-md-none表示从md（768px）开始隐藏（含md、sm、xs） -
d-lg-block表示从lg（992px）起恢复为block（即显示） - 注意顺序：后面类会覆盖前面类，所以
d-lg-block必须写在d-md-none后面 - 如果只写
d-none d-lg-block，它会在所有尺寸都隐藏，只在lg+显示——这是常见误配
Bootstrap 3 怎么隐藏某一个 col？
Bootstrap 3 还支持旧式 hidden- 类，但要注意它作用于整行布局逻辑，且对 col 的隐藏会影响 Flex 布局行为（因为 display: none 会让该列彻底退出文档流）。
例如，在 sm 屏幕下隐藏中间列：
<div class="row"> <div class="col-xs-4">A</div> <div class="col-xs-4 hidden-sm">B（sm 下不显示）</div> <div class="col-xs-4">C</div> </div>
-
hidden-sm对应min-width: 768px以下生效（即xs尺寸隐藏） - 它等价于
display: none !important，所以该col完全不占位、不参与栅格计算 - 如果用
visible-xs替代，语义更清晰但效果相同；不过别混用hidden-和visible-，容易冲突
用 visibility: hidden 而不是 display: none？
有时你希望某列“隐形但占位”，比如保持左右列间距一致，或避免 DOM 重排抖动，就不能用 d-none 或 hidden- ——它们都触发 display: none。
这时候手动加内联样式或自定义类更可控：
<div class="col" style="visibility: hidden; width: 0; padding: 0;"></div>
-
visibility: hidden保留元素盒模型（仍占栅格宽度），但不可见、不可交互 - 配合
width: 0和padding: 0可消除视觉残留（否则可能留白） - 不能靠 Bootstrap 原生类实现，必须手写样式或扩展 CSS
- 注意：若该列有子元素绑定事件或焦点逻辑，
visibility: hidden不会禁用它们，只是看不见
隐藏后 row 的 gutter 是否还存在？
是的，只要 col 没被 display: none 移除，它依然参与 row 的 flex 布局，左右 gutter（即 padding）照常生效。
- 用
d-{bp}-none或hidden-隐藏 → 列被移除 → 相邻列自动贴合，gutter 消失 - 用
visibility: hidden+ 手动清空 padding → gutter 可控保留或抹去 - 如果用
opacity: 0，gutter 仍在，但元素仍可点击、聚焦，容易引发可访问性问题
真正影响布局的从来不是“要不要隐藏”，而是“以什么方式隐藏”。选错方式，轻则错位，重则响应失效。断点类名顺序、display vs visibility、gutter 连带效应——这些细节堆起来，才是实际开发里最耗时间的地方。
