Bootstrap 4中hidden-sm-down类无法隐藏图片？求排查方法

我想要实现当屏幕尺寸为small时隐藏图片的效果，但使用以下代码后功能未生效，请问我是否遗漏了什么明显的内容？

<div class="media"> 
  <img class="d-flex align-self-center mr-3 hidden-sm-down" src="filler.png" alt="Example 2">
  <div class="media-body"> 
    <h4>Example 2</h4> 
    <p>Other contenthere</p> 
  </div> 
</div>

嘿，这个问题我太熟啦！你用的hidden-sm-down是Bootstrap 3专属的类，如果你的项目用的是Bootstrap 4或者更高版本，这个类早就被移除了，自然不会生效~

在Bootstrap 4及以后的版本里，响应式显示类的命名规则变了，要实现“在small及更小尺寸屏幕隐藏图片”的效果，得用这个类组合：d-none d-sm-block

• d-none：让元素默认处于隐藏状态
• d-sm-block：指定在sm（≥576px）及更大尺寸的屏幕下显示元素

所以修改后的img标签应该是这样：

<img class="d-flex align-self-center mr-3 d-none d-sm-block" src="filler.png" alt="Example 2">

另外还有两个小细节要排查：

• 如果你确实在使用Bootstrap 3，那得确认有没有正确引入Bootstrap的CSS文件，或者是不是有自定义的CSS样式覆盖了hidden-sm-down的隐藏规则
• 要是你不确定自己用的Bootstrap版本，可以打开浏览器的开发者工具，查看引入的Bootstrap CSS文件的版本注释

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