2.4 响应式工具类：显示与隐藏的裁决

2.4 响应式工具类：显示与隐藏的裁决

显隐裁决由 d-* 系列承担：d-none 隐藏、d-inline/d-block/d-flex 等按盒型显示，加断点前缀即成区间判决——d-md-none 读作「md 起隐藏」。配套的还有 order-* 的响应式重排与 text-* 的对齐变体。1.2 节的观察台角标就是六条显隐判决叠加的产物，本节把这套判决规则讲透。

位置：本章四审的最后一审。元素「占多少」（栅格）、「怎么排」（flex）都定案后，剩下的问题是「什么区间留、什么区间走」。第 3 章导航栏的折叠行为，本质也是组件内部的一次显隐裁决。

判决矩阵：一张表断所有显隐案

图 2-4 常用显隐组合的断点矩阵

矩阵四行的推理方式值得练一遍。以「md 到 xl 显示」为例：默认要隐藏，判 d-none；md 起要显示，判 d-md-inline；xxl 起要再隐藏，判 d-xxl-none。三条判决按断点从小到大叠加，可见窗口恰好是 md 到 xl——任何显隐需求都能拆成「默认 + 起点 + 收回」三段式，这也是 1.2 节观察台的造法。

取证：盒型跟着断点走

<!-- 盒型切换：同一个元素在不同区间用不同盒型参与排版 -->
<span class="d-block d-sm-inline">手机上独占一行</span>
<span class="d-block d-sm-inline">手机上独占一行</span>
<!-- 效果：xs 下两个 span 各占一行；576px 起变成行内文字，排在同一行 -->

<!-- 大屏专属的装饰性侧栏 -->
<aside class="d-none d-lg-block col-lg-3">
  <div class="p-3 bg-body-tertiary border rounded">推荐位：lg 起才参与排版</div>
</aside>
<!-- 效果：xs 到 md 完全不占位（display:none 连盒子都不生成），lg 起回归 -->

<!-- 打印场景：屏上隐藏、纸面出现 -->
<div class="d-none d-print-block">打印专用落款与版权行</div>
<!-- 效果：屏幕上看不到；打印或另存 PDF 时显示，d-print-* 是独立的一族条文 -->
​

核实方法：把窗口拖到目标区间，在开发工具里选中元素，样式面板中 display:none 的规则会显示为划线或点亮状态；同时布局树里该元素彻底消失——这与 invisible（保留占位、只隐内容）是两种不同判决。

裁决：隐藏的两种刑期与两个易错点

d-none 是「注销户籍」：盒子不生成、不占位、读屏软件也不朗读；visibility 工具（invisible）是「保留席位」：看不见但占着地方。绝大多数场景要的是前者；只有布局依赖占位（如轮播占位、动画退场）才用后者。

<!-- 易错点一：显隐工具不认「小于某断点」这种写法，只能「默认生效 + 大断点收回」 -->
<!-- 需求「仅 lg 以下显示」的正确判决是： -->
<div class="d-lg-none">lg 以下我都显示</div>
<!-- 而不是 d-down-lg 之类不存在的类 -->

<!-- 易错点二：表格行的显隐要用 d-*-table-row，保持表格盒型 -->
<tr class="d-none d-md-table-row">
  <td>桌面才显示的行</td>
</tr>
<!-- 效果：md 起恢复为表格行盒型；若写 d-md-block，表格布局会被非行盒型破坏 -->
​

⚠️ 常见坑：用显隐工具做「手机版与桌面版两套内容」时，两套内容都会进 DOM——搜索引擎与读屏软件看到的是重复内容。裁决尺度：视觉形态微调用显隐；内容本身不同，就交栅格与 order 重排，别让同一篇文章在页面里存两份。

复盘：亲手造一个断点指示器

1.2 节借走的观察台角标，现在可以自己判了。目标：页面角落常驻一个小标签，任何视口宽度下只报当前所在断点。拆案：六个断点六个标签，每个标签都是「默认隐藏 + 自己区间显示」的判决——但注意 Bootstrap 的条文只有「起点」没有「终点」，单靠 d-* 会重叠，必须与「收回判决」配合。

<!-- 断点指示器：六个徽章，每个只在自己的区间亮起 -->
<div class="position-fixed bottom-0 start-0 p-2" aria-hidden="true">
  <span class="badge text-bg-secondary d-inline d-sm-none">xs</span>
  <span class="badge text-bg-secondary d-none d-sm-inline d-md-none">sm</span>
  <span class="badge text-bg-secondary d-none d-md-inline d-lg-none">md</span>
  <span class="badge text-bg-secondary d-none d-lg-inline d-xl-none">lg</span>
  <span class="badge text-bg-secondary d-none d-xl-inline d-xxl-none">xl</span>
  <span class="badge text-bg-secondary d-none d-xxl-inline">xxl</span>
</div>
<!-- 效果：拖动视口，同一时刻只有一个徽章存活；
     每个「区间显示」都是「起点判决 + 下一档收回」的成对条文 -->
​

逐条读一遍这六行，显隐三段式就长在肌肉里了：xs 行是「默认显示 + sm 收回」；sm 到 xl 行都是「默认隐藏 + 自档显示 + 下一档收回」；xxl 行只有起点没有收回，因为它之上再无更高法庭。把它贴进任何练习页，后面每一章的断案都能即时核对——第 3 章审 navbar 折叠点时，这个角标就是秒表。

顺带一个排错应用：若某个区间两个徽章同时亮，说明收回判决漏写；一个都不亮，说明起点判决拼写错了断点名。指示器本身成了显隐类名的自检电路。

变式：从显隐到次序的联合判决

需求：一组筛选项，手机上竖排且「更多筛选」默认收起，md 起横排全展开。拆解：容器 d-flex flex-column flex-md-row gap-2 管排向；「更多筛选」区块 d-none d-md-flex 让它在 md 起回归；若还要求某个高频筛项在手机上排最前，加 order-first order-md-0（先提前、md 起归位）。三个工具族各判一段，联合执行。

结案要点

• 显隐判决三段式：默认（d-none 或盒型）+ 起点判决（d-md-inline）+ 收回判决（d-xxl-none）；
• d-none 注销占位，invisible 保留占位，按是否需要「席位」选择；
• 不存在「小于」方向的类，下行区间的隐藏靠「默认显示 + 大断点收回」表达；
• 表格行用 d-*-table-row，打印场景有独立的 d-print-* 族；
• 显隐是排版工具不是内容策略，重复内容两套 DOM 是 SEO 与无障碍的双重隐患。

第 2 章四审完结，布局的发条已经上紧。第 3 章进入组件：它们是长在栅格上的预制件，多数自带断点行为。