如何在移动端隐藏Bootstrap垂直分隔线（vr）？

你用反了Bootstrap的响应式display类——d-sm-none的作用是在sm及以上尺寸的屏幕（≥576px）隐藏元素，而你要的是移动端（<576px）隐藏，所以类的逻辑搞反了。

正确的写法应该是：

<div className='vr mx-3 d-none d-sm-block'></div>

• d-none：默认状态下隐藏元素（移动端生效）
• d-sm-block：当屏幕宽度达到sm断点（576px）及以上时，显示元素

如果还是没效果，你可以用浏览器的开发者工具检查这个元素的样式：

• 确认Bootstrap的CSS是否正确加载
• 看有没有自定义CSS覆盖了display属性，如果有，调整自定义样式的优先级或者修改规则

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