哦，这个坑我刚用Bootstrap 4的时候也踩过！你用的hidden-sm-down这类旧的隐藏类，在Bootstrap 4里已经完全被移除了，这就是为啥你的元素始终可见，其他类却正常工作的原因～

为什么旧类没用？ #

Bootstrap 4彻底重构了响应式显示/隐藏的工具类，抛弃了v3里的hidden-*、visible-*系列，改用了更清晰的d-前缀类。旧类的命名逻辑容易造成断点混淆，新类则完全基于「最小断点宽度」来定义，更直观。

你的需求对应的正确写法 #

你想要实现的是：屏幕缩小到sm及以下（即宽度≤767px，对应Bootstrap的sm和xs断点）时隐藏元素，md及以上（≥768px）时显示。对应的正确类组合是：

<div class="row">
  <div class="col col-10 offset-1 d-none d-md-block">
    <p class="text-primary text-center">Lorem ipsum dolor sit amet.</p>
  </div>
</div>

类的逻辑解释 #

• d-none：默认在所有屏幕尺寸下隐藏元素
• d-md-block：在md及更大的屏幕（≥768px）上覆盖d-none，将元素设置为块级显示

这样就刚好满足你的需求：当窗口宽度小于md断点（也就是sm及以下）时，d-md-block不生效，元素保持d-none的隐藏状态；当窗口宽度≥md时，d-md-block生效，元素显示。

其他常见场景的写法参考 #

如果需要其他响应式隐藏逻辑，可以按这个规律组合：

• xs及以下隐藏，sm及以上显示：d-none d-sm-block
• md及以下隐藏，lg及以上显示：d-none d-lg-block
• sm及以上隐藏，xs显示：d-block d-sm-none

额外提醒 #

确认你引入的确实是Bootstrap 4的CSS文件，没有不小心混用Bootstrap 3的资源——这也是很多人遇到类不生效的常见原因哦！

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