Bootstrap栅格系统通过12列布局、5级断点（xs/sm/md/lg/xl/xxl）和语义化类名（如col-md-4）实现响应式，无需手写媒体查询；需用container或container-fluid包裹row，再嵌套col，支持等宽自适应、混合断点、偏移与间距控制。
用 Bootstrap 栅格系统搭建响应式页面，核心是理解其 12 列布局、断点划分和类名命名逻辑，不写一行媒体查询也能适配手机、平板、桌面。
Bootstrap 5 默认提供 5 个响应断点（xs / sm / md / lg / xl / xxl），对应不同屏幕宽度。每个断点下，容器被划分为最多 12 等份，通过类名如 col-md-4 表示“在中屏及以上占 4 列”。注意：未指定断点的类（如 col-6）默认作用于 xs，而带断点的类（如 col-lg-3）会在该断点及更宽屏幕生效，小屏自动堆叠。
响应式布局必须包裹在正确容器内：
栅格不只是均分，更要应对真实需求：
立即学习“前端免费学习笔记（深入）”；
<div class="col"> —— 多个 col 并列时自动均分剩余空间（无需指定数字）
<li>响应式混合：<code><div class="col-12 col-md-6 col-lg-4"> —— 手机占满、中屏半宽、大屏三分之一
<li>偏移与空隙：<code>offset-md-2 向右空出 2 列；g-3（加在 row 上）统一设置列间距border border-primary 查看元素实际占位bg-light + text-dark 区分区块层次真正高效的响应式不是堆砌类名，而是用最少的断点覆盖主要设备场景，多数内容用 md 或 lg 做分界点已足够实用。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
300
收藏
