Bootstrap 4是否有反向sr-only类？文本浏览器适配问题咨询

嘿，这个问题问得很到位！Bootstrap 4 本身并没有原生提供那种「反向 sr-only」的类——也就是专门让内容只在 GUI 浏览器显示、文本浏览器（比如 Lynx）自动隐藏的类。不过别担心，我们有两种简单的方法可以实现你的需求：

方案一：自定义专属CSS类 #

你可以自己写一个极简的CSS类，核心思路是：让支持CSS的GUI浏览器显示内容，不支持CSS的文本浏览器自动隐藏（同时提供友好的替代内容）。

首先添加自定义CSS：

/* 仅在支持CSS的GUI浏览器中显示 */
.gui-only {
  display: block !important;
}

然后把OSM的iframe放在这个类的容器里，同时用<noscript>标签给文本浏览器提供替代内容：

<div class="gui-only">
  <iframe src="你的OSM嵌入链接" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<noscript>
  <p>你可以访问 <a href="你的OSM地图页面链接">这里查看地图</a></p>
</noscript>

这样一来，Firefox这类GUI浏览器会正常显示嵌入的地图，而Lynx这类文本浏览器会跳过iframe，直接显示<noscript>里的链接，完美避免长URL和错误信息的问题。

方案二：结合Bootstrap原生类与媒体查询 #

如果你想尽量复用Bootstrap的现有类，可以结合它的.d-none类（默认隐藏元素），再用媒体查询针对屏幕环境显示内容：

添加自定义CSS：

/* 仅在屏幕环境（GUI浏览器）下覆盖.d-none，显示元素 */
@media screen {
  .gui-only {
    display: block !important;
  }
}

然后给iframe容器添加类：

<div class="d-none gui-only">
  <iframe src="你的OSM嵌入链接" ...></iframe>
</div>
<noscript>
  <p>你可以访问 <a href="你的OSM地图页面链接">这里查看地图</a></p>
</noscript>

原理和方案一类似：.d-none让元素默认隐藏，而@media screen会在GUI浏览器（识别屏幕媒体类型）中触发，把元素重新显示出来；文本浏览器不支持媒体查询，会保持元素隐藏状态。

内容的提问来源于stack exchange，提问作者Özcan Oğuz