Bootstrap 4：xs与sm设备下隐藏元素失效问题排查

我来帮你排查这个问题——这其实是对Bootstrap 4移动优先的响应式类规则理解偏差导致的，很常见！

首先，先明确Bootstrap 4的断点定义和显示类逻辑：

• xs: <576px（超小屏）
• sm: ≥576px（小屏）
• md: ≥768px（中屏）
  Bootstrap 4是移动优先框架，不带断点的类（比如d-none）会作用于所有屏幕，而带断点的类（比如d-sm-none）是指在该断点及更大的屏幕上生效。

你当前用的d-sm-none d-md-block是什么意思呢？

• d-sm-none: 在sm及更大的屏幕（≥576px）上隐藏元素
• d-md-block: 在md及更大的屏幕（≥768px）上显示元素

这就导致了：

• 在xs屏幕（<576px）时，d-sm-none不生效，元素默认显示，这就是你遇到的xs隐藏失效的问题
• 在sm屏幕（576px-767px）时，d-sm-none生效，元素隐藏
• 在md及以上屏幕时，d-md-block生效，元素显示

而你想要的是xs和sm屏幕都隐藏，md及以上显示，正确的类组合应该是d-none d-md-block：

• d-none: 所有屏幕默认隐藏
• d-md-block: 在md及更大的屏幕（≥768px）上覆盖d-none，显示元素

修改后的代码片段如下：

<div class="headers"> 
  <div class="row"> 
    <div class="col-lg-6 col-md-4 col-sm-5">Produkt</div> 
    <div class="col-2 d-none d-md-block d-flex justify-content-start">Cena</div> 
    <div class="col-lg-2 col-md-3 col-sm-4 d-flex justify-content-center">...</div>
  </div>
</div>

再补充个小技巧：如果要快速验证响应式类的效果，可以用浏览器开发者工具的设备模拟器，切换不同屏幕尺寸来实时查看元素的显示状态，这样能更快定位问题。

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