Bootstrap 4 如何在页脚文本后同行仅展示当前响应式断点

问题原因 #

你原有代码的问题是d-inline-block类写在了d-none类的后方，CSS规则后声明的优先级更高，导致隐藏规则被覆盖，因此会同时展示多个符合条件的断点文本。

修正后的实现代码 #

<body>
  <app-root class="mb-4"></app-root>
  <footer class="footer">Create by Me 
    <span class="d-inline d-sm-none">xs</span>
    <span class="d-none d-sm-inline d-md-none">sm</span>
    <span class="d-none d-md-inline d-lg-none">md</span>
    <span class="d-none d-lg-inline d-xl-none">lg</span>
    <span class="d-none d-xl-inline">xl</span>
  </footer>
</body>

实现说明 #

Bootstrap 4 的 display 工具类遵循移动端优先逻辑：

• 不带断点后缀的类作用于所有尺寸
• 带sm/md/lg/xl后缀的类，仅在对应断点及更大尺寸下生效

按「默认隐藏 → 目标断点显示 → 更大断点隐藏」的顺序写类，即可保证每个断点标签仅在唯一对应尺寸下显示，这里使用d-inline就可以实现和前面页脚文本同行，不需要额外用d-inline-block。

内容的提问来源于stack exchange，提问作者tm1701