d-{breakpoint}-none 用于响应式隐藏 input 元素，需注意断点逻辑、表单提交影响、布局塌陷、表格结构兼容性、ssr 一致性及 js 动态切换陷阱。
用 d-{breakpoint}-none 隐藏特定 input 元素
直接给 <input> 加 d-md-none 就能在 ≥768px 屏幕上隐藏它，但必须确认你没漏掉「恢复显示」的逻辑——比如只写 d-none，那它在所有尺寸下都不可见。
-
d-sm-none：仅在 ≥576px（即小屏及以上）隐藏，xs（手机竖屏）仍显示 -
d-md-none d-lg-block：md 断点起隐藏，lg 起重新显示；注意顺序，d-lg-block必须写在后面才能覆盖 - 别对
<input>单独加visibility: hidden或opacity: 0：它们不阻止表单提交，用户看不见但值仍会发到后端 - 如果该
input是必填项，记得同步移除required属性，否则小屏提交会失败
隐藏整行 form-group 时要注意布局塌陷
Bootstrap 的 .form-group（或 <div class="mb-3">）被 <code>d-md-none 隐藏后，父容器不会自动重排剩余元素——尤其是使用 flex 或 grid 布局的表单容器，可能留下异常空白或错位。
- 验证方式：禁用 JS 后刷新页面，纯 HTML 渲染下是否还符合预期布局
- 若需“视觉隐藏但保留占位”，改用
invisible类（不是d-none），但要额外加tabindex="-1"防止键盘焦点落入 - 避免在 SSR 框架（如 Next.js）中靠 UA 判断加
d-md-none：服务端和客户端断点检测不一致会导致 hydration mismatch
表格内表单控件隐藏要匹配 display 类型
如果 <input> 在 <td> 或 <code><th> 里，直接加 <code>d-md-none 可能破坏表格结构——因为 <td> 默认是 <code>display: table-cell，而 d-md-none 设的是 display: none，会强制退出表格渲染流。
- 正确做法：给
<td> 加 <code>d-none d-lg-table-cell，先隐藏，再在 lg+ 恢复为table-cell - 如果整列都要隐藏（含表头和所有数据行），不要逐个
<td> 加类，改用 CSS <code>:nth-child(n)或自定义属性选择器统一控制 - 测试边界值：刚好 768px 宽度的设备（如某些平板横屏）是否触发了预期行为，避免因媒体查询断点对齐偏差导致双显/双隐
- 检查是否生效：读取
element.offsetParent，为null表示已脱离文档流（d-none生效）；若仍有值，可能是用了invisible或opacity - 动态添加的
input（如通过 JS 插入），要确保 Bootstrap CSS 已加载完成，否则d-md-none类名存在但无对应样式规则 - 密码显示/隐藏按钮这类交互控件，别把
d-none加在<button></button>上做开关——应控制其父<div class="input-group"> 的显隐，否则输入框焦点会丢失 实际项目中最容易被忽略的，是「隐藏后是否还要参与表单提交」和「服务端与客户端断点判断是否一致」这两点。前者决定你该用 <code>d-none还是aria-hidden="true"+disabled，后者直接关系到 SSR 应用能否正常水合。
JS 动态切换隐藏状态时的常见陷阱
用 JS 控制 input 显隐时，别只靠 classList.toggle('d-none') 就完事——d-none 影响的是整个元素的渲染流，后续依赖它的 DOM 方法（如 getBoundingClientRect()、focus()）会失效。
