首页 > 前端
bootstrap4响应式隐藏显示元素
来源:TP课堂 时间:2022-07-29

隐藏元素

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


显示元素:

visible-md-block 表示在早中型设备台式电脑(≥992px)可显示

visible-lg-block 表示在大型设备台式电脑(≥1200px)可显示

visible-xs-block 表示在超小设备手机(<768px)可显示