2021-05-18 17:44:38  3290 0

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时无条件隐藏