应将需隐藏的文字单独包裹在或中，使用d-none d-md-block（桌面显示）或d-block d-md-none（手机显示），避免直接对col应用响应式d-*类；d-sm-none在手机端无效，因其仅在≥576px生效。
想在特定断点下隐藏 col 里的某段文字，别动 col 本身
直接对 col 加 d-sm-none 会把整列干掉，包括其他内容、内边距、甚至影响栅格流。真正要藏的只是「某段文本」，得把它单独包一层再控制显隐。
常见错误是写成：<div class="col d-md-none">这段文字</div>——这藏的是列容器，不是文字；更糟的是，d-md-none 在 ≥768px 才生效，手机竖屏（375px）完全不受影响，你以为藏了，其实全显示着。
- 把目标文字用
<span></span>或<div> 单独包裹，加响应式 <code>d-类 - 确保父
col是块级（默认就是），否则span加d-block可能不生效 - 避免在 flex 容器里直接对子元素用
d-none：flex 项目即使display: none，仍可能因父级flex-wrap或min-width: 0行为异常 -
d-none必须写在最前面，否则会被后面类覆盖 - 测试时别只信 Chrome 的 “iPhone X” 预设，手动拖动宽度到 576px 以上才能验证
sm类是否触发 - iPad 横屏（1024px）属于
lg断点，若需避开它，改用d-none d-xl-block（≥1200px）更稳妥 - 优先用
d-{bp}-none，而不是invisible或自定义visibility: hidden—— 后者仍占文档流，容易撑开父容器 - 如果父
col用了col-lg-auto这类自适应类，隐藏文字后它可能收缩，导致相邻列错位；此时建议固定宽度，如col-lg-4 - 在
card-title或dropdown-item里隐藏文字，要留意这些组件自带的 padding/margin，可能掩盖隐藏效果 - 多行截断必须配
display: -webkit-box，且父容器不能是 flex 项目（除非加min-width: 0） - 如果用了
col+line-clamp-2，又想在sm下隐藏，直接给col加d-sm-none最简单可靠 - 别指望
text-truncate和d-{bp}-none能自动联动——它们是两套机制，一个管截断，一个管显隐，得手动协调
d-sm-none 不等于“小屏隐藏”，它在手机上根本不起作用
d-sm-none 的媒体查询是 @media (min-width: 576px)，也就是说，只有视口宽度 ≥576px 时才设 display: none。而 iPhone SE（375px）、iPhone 13（390px）、Pixel 5（412px）全在 xs 断点（0–575.98px）里，d-sm-none 根本不匹配，CSS 规则压根不加载。
想让文字只在桌面显示、手机隐藏？必须用反向组合：d-none d-md-block（先全局隐藏，≥768px 再显示）；想只在手机显示？用 d-block d-md-none（默认显示，≥768px 隐藏）。
文字藏了但留白还在？检查 white-space 和容器宽度
只加 d-{breakpoint}-none 能隐藏，但如果你原本靠 text-truncate 做单行省略，现在想“断点下彻底隐藏文字”，得确认两件事：一是容器没因隐藏文字而塌缩出奇怪间隙，二是没误用 visibility: hidden 导致占位残留。
text-truncate 本身不控制显隐，它只管截断逻辑，且依赖 width + overflow: hidden + white-space: nowrap。如果在响应式场景下混用，比如给一个 col-6 加 text-truncate，又在 md 下用 d-md-none 隐藏文字，那 col-6 的宽度还在，空白就还在。
复杂场景：需要多行文本在断点下整体隐藏
单行文字用 d-{breakpoint}-none 就够了；但如果是多行文本（比如 <p></p> 套了两三个 <span></span>），或者用了 line-clamp-2 这类 WebKit 多行截断，就不能只靠 display 控制——因为 -webkit-line-clamp 依赖父容器有明确 max-height 和 overflow，而 d-none 会直接移除整个节点，max-height 设置也就失效了。
这时候得回归 CSS 层面：要么用媒体查询包裹整套多行截断规则，要么直接用 d-{breakpoint}-none 包住整个 <p></p> 容器。别试图在 line-clamp 内部再嵌套响应式类，它不支持断点感知。
