bootstrap响应式隐藏显示
2023年08月10日 1920

代码

隐藏元素

  • 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时隐藏

sm、md、lg、xl含义


col-*对应所有设备

 

 col-sm-平板--屏幕宽度等于或者大于576px

 

col-md-桌面显示屏--屏幕宽度大于或者等于768px

 

col-lg-大桌面显示器--屏幕宽度大于或者等于992px

 

col-xl-超大屏幕显示器--屏幕宽度大于等于1200px


- End -




0 条评论
  • 表情
  • 游客你好,回复内容需要 登录 查看!