bootstrap 5+ 使用 visually-hidden 及其断点变体（如 visually-hidden-md）实现仅视觉隐藏、保留可访问性的响应式控制，需避免与 d-none 混用导致屏幕阅读器无法读取。
用 visually-hidden 配合断点工具类隐藏描述文字
Bootstrap 5+ 不再提供 sr-only（旧版写法），统一改用 visually-hidden 类实现“仅对屏幕阅读器可见、视觉上隐藏”。但这个类本身不带响应式，必须搭配断点前缀（如 visually-hidden-sm）才能在特定断点下生效。
常见错误是直接写 class="visually-hidden d-none d-sm-block"——这会冲突：两个类同时作用，行为不可预测；或者误用 d-sm-none 却忘了它只控制 display，对辅助技术不友好。
-
visually-hidden：完全隐藏视觉内容，但保留在可访问性树中（推荐用于描述性文字） -
visually-hidden-{breakpoint}：仅在该断点及以上生效。例如visually-hidden-md表示 ≥md（768px）时隐藏 - 若要“仅在某个断点区间隐藏”，需组合使用：比如“只在
sm下隐藏”，用visually-hidden-sm visually-hidden-sm-down不行——Bootstrap 没有-down变体；正确做法是visually-hidden-sm d-sm-block（即 sm 起显示，sm 前隐藏）
在 col 内部精准控制某段文字的响应式可见性
不要给整个 col 加隐藏类，否则整列都消失。目标是只隐藏其中一段 <span></span> 或 <p></p>。
假设你有一个描述文字放在 col 里，希望它在 md 及以上断点消失：
<div class="row">
<div class="col">
<h3>标题</h3>
<p>正文内容</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap"><img
src="https://img.php.cn/upload/manual/001/431/639/6a6713fbcf1ac183.png" alt="Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap" class="overflowclass">Bootstrap</a>
<p class="overflowclass">Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<span class="visually-hidden-md">这是仅在小屏显示的辅助说明</span>
</div>
</div>
注意：visually-hidden-md 是 Bootstrap 5.3+ 新增的响应式变体；如果你用的是 5.2 或更早版本，该类不存在，需手动补全 CSS 或降级为 visually-hidden d-md-block（不推荐）或自定义类。
- 检查你的 Bootstrap 版本：
console.log(bootstrap.VERSION)或查node_modules/bootstrap/dist/css/bootstrap.css是否含.visually-hidden-md - 如果版本不支持，最稳妥的方式是加一个自定义类：
<span class="visually-hidden-md-fallback"></span>，并在 CSS 中写：@media (min-width: 768px) { .visually-hidden-md-fallback { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } }
避免和 d-none 混用导致可访问性丢失
很多开发者图省事直接用 d-none d-md-block 控制文字显隐，但这会让屏幕阅读器也跳过该内容——如果这段文字是关键上下文（比如图标旁的“删除”说明），就会造成无障碍缺陷。
- 纯视觉装饰？用
d-{breakpoint}-none安全 - 承载语义或操作意图的文字？必须用
visually-hidden-{breakpoint}或其等效方案 - 特别注意：Bootstrap 的
d-{bp}-none在所有断点都移除 DOM 渲染，而visually-hidden系列只是视觉隐藏，DOM 和 ARIA 层仍存在
验证是否真被屏幕阅读器读取
别只靠浏览器 DevTools 看 display 属性。实际测试时，打开 VoiceOver（macOS）、NVDA（Windows）或 TalkBack（Android），聚焦到该 col 区域，听是否播报那段文字。
容易被忽略的一点：如果父容器用了 aria-hidden="true" 或 role="presentation"，子元素即使加了 visually-hidden 也不会被读出。所以务必检查文字的祖先节点有没有意外屏蔽了可访问性。
复杂点不在写法，而在判断——这段文字到底算“辅助说明”还是“核心信息”。前者才适合视觉隐藏，后者必须始终可见或至少提供替代方式。
