用途:该技能面向 Bootstrap 5.3 布局系统,当用户询问网格系统、容器、断点、列、行、间距(gutters)、对齐、排序、偏移或嵌套时使用,帮助给出正确的类名与结构。
主要能力:覆盖六档默认断点(xs 无中缀 <576px、sm ≥576px、md ≥768px、lg ≥992px、xl ≥1200px、xxl ≥1400px,移动优先、向上生效);容器类型 .container、.container-fluid 及 .container-sm 至 .container-xxl 的响应式最大宽度;网格基本结构 container > row > col,等宽列 .col、指定宽度 .col-{1-12}、响应式列如 .col-12 col-md-6、自动布局 .col-auto、每行列数 .row-cols-;间距 gx-、gy-、g- 及响应式写法;垂直对齐 align-items-、align-self-,水平对齐 justify-content-;排序 order-、偏移 offset-* 与 ms-auto;列嵌套;列换行与强制换行(.w-100、配合 d-none d-md-block);独立列类;大间距导致横向溢出时的处理(容器加 px-4 或 overflow-hidden);实验性 CSS Grid(.grid、.g-col-*,v5.1.0 起默认关闭,需在 Sass 中启用);z-index 工具类与组件堆叠顺序;侧边栏、卡片网格等常见布局模式;以及 Sass 变量($grid-columns、$grid-gutter-width、$enable-cssgrid)与 media-breakpoint-up/down/between/only、make-row、make-col-ready、make-col 等 mixin 定制。
使用方式:按资料中的类名组合编写 HTML 结构,例如 <div class="container"><div class="row"><div class="col">…</div></div></div>;需要定制时通过 Sass 变量与 mixin 编译。
适用场景:使用 Bootstrap 5.3 构建响应式页面布局、栅格排版与组件层级控制。
限制:CSS Grid 为实验性且需手动启用;z-index 不建议单独修改,应通过 Sass 变量统一调整;资料未提供安装命令、收费、价格或平台信息。