网格 XXL

收藏627

阅读2828

更新时间2025-08-11

XXL 设备网格实例

XSmall Small Medium Large Extra Large XXL
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
屏幕宽度 <576px >=576px >=768px >=992px >=1200px >=1400px

XXL 设备被定义为具有 1400 像素及以上的屏幕宽度。

下例将在中型、大型和超大型设备上产生 50%/50% 的拆分,在 XXL 设备上产生 25%/75% 的拆分。在小型和超小型设备上,它会自动堆叠(100%):

实例

世界自然基金会(WWF),成立于1961年4月29日,其标志是一只大熊猫 ...

1980年,WWF正式来到中国,受中国政府邀请来华开展大熊猫及其栖息地的保护工作 ...

注意:请确保总和始终为 12。

仅使用 XXL

在下例中,我们只指定了 .col-xxl-6 类(没有 .col-md-* 和 / 或 .col-sm-*)。这意味着 xxlarge 设备将拆分 50%/50%。但是,对于超大、大、中、小和超小设备,它将垂直堆叠(100% 宽度):

实例

世界自然基金会(WWF),成立于1961年4月29日,其标志是一只大熊猫 ...

1980年,WWF正式来到中国,受中国政府邀请来华开展大熊猫及其栖息地的保护工作 ...

自动布局列

在 Bootstrap 5 中,有一种简单的方法可以为所有设备创建等宽的列:只需从 .col-xxl-* 中删除数字,并仅在 col 元素上使用 .col-xxl 类。 Bootstrap 将识别有多少列,并且每列将获得相同的宽度。

如果屏幕尺寸小于 1400px,列将水平堆叠:


1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号