Bootstrap响应式隐藏显示

V Tenyet 4月前

655 1

隐藏元素

  • 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

──── 1人觉得很赞 ────
丫丫
已有回复 (1)
  • V Tenyet (靓号:1) @Ta 4月前
    沙发

    0
发新帖
扫码访问