bootstrap响应式隐藏显示

魔王  (UID: 1) 2023-11-24 [复制链接]
帖子链接已复制到剪贴板

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

sm、md、lg、xl含义


col-*对应所有设备

 

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

 

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

 

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

 

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

已有评论 (0)
提示:您必须 登录 才能查看此内容。
创建新帖