BootStrap4.0+响应式显示/隐藏元素

隐藏元素

• d-none: 无条件隐藏
• d-sm-none: 设备尺寸大于等于sm时隐藏
• d-md-none: 设备尺寸大于等于md时隐藏
• d-lg-none: 设备尺寸大于等于lg时隐藏
• d-xl-none: 设备尺寸大于等于xl时隐藏

显示元素

• d-sm-block: 设备尺寸大于等于sm时显示
• d-md-block: 设备尺寸大于等于md时显示
• d-lg-block: 设备尺寸大于等于lg时显示
• d-xl-block: 设备尺寸大于等于xl时显示

组合

• d-none d-sm-block: 设备尺寸小于sm时隐藏
• d-none d-md-block: 设备尺寸小于md时隐藏
• d-none d-lg-block: 设备尺寸小于lg时隐藏
• d-none d-xl-block: 设备尺寸小于xl时隐藏

总结

• 设备查询默认是向上的，例如d-sm-block，表示当设备在sm、md、lg、xl尺寸下都显示
• 没有d-xs-* 因为当*为block时无条件显示，当*为none时无条件隐藏，效果鸡肋