Bootstrap 4.0+中.hidden-*-down/up类的等效替代方案是什么？

刚巧我在从Bootstrap 3迁移到4的时候踩过这个坑！没错，Bootstrap 4彻底移除了旧的 .hidden-*-down/up 系列类，换成了一套基于 d-* 前缀的响应式显示控制类，逻辑更清晰，也更灵活。

先理清核心逻辑 #

旧的 .hidden-*-down/.hidden-*-up 是基于「断点以下/以上隐藏」的逻辑，而Bootstrap 4的新类是反过来：先设置默认显示/隐藏状态，再通过断点类覆盖特定屏幕尺寸的表现。

Bootstrap 4的默认断点（从小到大）：

• xs：<576px
• sm：≥576px
• md：≥768px
• lg：≥992px
• xl：≥1200px

1. 替代 .hidden-*-down 类 #

.hidden-md-down 的作用是：在md及更小尺寸的屏幕（也就是<992px）隐藏元素，仅在lg及以上屏幕显示。

对应的替代方案是组合两个类：

• d-none：默认让元素在所有屏幕隐藏
• d-lg-block：让元素在lg及以上屏幕以block形式显示（如果需要其他display类型，比如inline/flex，替换成d-lg-inline/d-lg-flex即可）

举个你给出的例子，改造前：

<div class="justify-content-center"> 
  <p class="hidden-md-down"> TEXT </p> 
</div>

改造后：

<div class="justify-content-center"> 
  <p class="d-none d-lg-block"> TEXT </p> 
</div>

2. 替代 .hidden-*-up 类 #

.hidden-md-up 的作用是：在md及更大尺寸的屏幕（也就是≥768px）隐藏元素，仅在sm及以下屏幕显示。

对应的替代方案是：

• d-block：默认让元素在所有屏幕以block形式显示
• d-md-none：让元素在md及以上屏幕隐藏

示例：
改造前：

<p class="hidden-md-up">仅小屏幕可见的文本</p>

改造后：

<p class="d-block d-md-none">仅小屏幕可见的文本</p>

额外小提示 #

如果需要更精细的控制，Bootstrap 4支持所有常见的display属性作为后缀，比如：

• d-lg-inline-block：lg及以上显示为inline-block
• d-xl-flex：xl及以上显示为flex
• d-sm-none：sm及以上隐藏

核心思路就是：先定义全局默认状态，再用断点类覆盖特定尺寸的显示规则。

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