重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
bootstrap-layout by sjnims/bootstrap-expert
npx skills add https://github.com/sjnims/bootstrap-expert --skill bootstrap-layoutBootstrap 的布局系统基于 flexbox 构建,并提供了一个强大的 12 列网格系统用于创建响应式布局。本技能涵盖容器、网格系统、断点和布局工具类。
Bootstrap 的响应式设计使用六个默认断点:
| 断点 | 类后缀 | 尺寸 |
|---|---|---|
| 超小 | 无 | <576px |
| 小 | sm | ≥576px |
| 中 | md | ≥768px |
| 大 | lg | ≥992px |
| 超大 | xl |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| ≥1200px |
| 超超大 | xxl | ≥1400px |
断点适用于指定宽度及以上(移动优先)。
容器是布局的基本构建块。
<!-- 固定宽度容器(在每个断点处有最大宽度) -->
<div class="container">...</div>
<!-- 全宽容器(在所有断点处为 100%) -->
<div class="container-fluid">...</div>
<!-- 响应式容器(直到指定断点前为 100%) -->
<div class="container-sm">sm 之前为 100%,之后固定</div>
<div class="container-md">md 之前为 100%,之后固定</div>
<div class="container-lg">lg 之前为 100%,之后固定</div>
<div class="container-xl">xl 之前为 100%,之后固定</div>
<div class="container-xxl">xxl 之前为 100%,之后固定</div>
| xs<576px | sm≥576px | md≥768px | lg≥992px | xl≥1200px | xxl≥1400px
---|---|---|---|---|---|---
.container | 100% | 540px | 720px | 960px | 1140px | 1320px
.container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px
.container-md | 100% | 100% | 720px | 960px | 1140px | 1320px
.container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px
.container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px
.container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px
.container-fluid | 100% | 100% | 100% | 100% | 100% | 100%
网格使用一系列容器、行和列。
<div class="container">
<div class="row">
<div class="col">列 1</div>
<div class="col">列 2</div>
<div class="col">列 3</div>
</div>
</div>
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">2 of 3</div>
<div class="col">3 of 3</div>
</div>
使用 .col-{数字} 指定宽度(1-12):
<div class="row">
<div class="col-8">8 列宽</div>
<div class="col-4">4 列宽</div>
</div>
<div class="row">
<div class="col-3">3 列</div>
<div class="col-6">6 列</div>
<div class="col-3">3 列</div>
</div>
结合断点后缀实现响应式行为:
<!-- 在移动设备上堆叠,在 md+ 上并排 -->
<div class="row">
<div class="col-12 col-md-6">在 md+ 上居左</div>
<div class="col-12 col-md-6">在 md+ 上居右</div>
</div>
<!-- 在不同断点处使用不同宽度 -->
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">响应式列</div>
</div>
<!-- 设置一列宽度,其他自动 -->
<div class="row">
<div class="col">自动</div>
<div class="col-6">6 列</div>
<div class="col">自动</div>
</div>
<!-- 可变宽度内容 -->
<div class="row justify-content-center">
<div class="col-auto">可变宽度内容</div>
</div>
控制每行的列数:
<!-- 始终每行 2 列 -->
<div class="row row-cols-2">
<div class="col">项目 1</div>
<div class="col">项目 2</div>
<div class="col">项目 3</div>
<div class="col">项目 4</div>
</div>
<!-- 响应式:xs 上 1 列,sm 上 2 列,md 上 3 列,lg 上 4 列 -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
<div class="col">项目</div>
<!-- 更多项目... -->
</div>
间距是列之间的间隙。默认为 1.5rem (24px)。
<div class="row gx-5">
<div class="col">宽水平间距</div>
<div class="col">宽水平间距</div>
</div>
<div class="row gy-4">
<div class="col-6">换行时的垂直间距</div>
<div class="col-6">换行时的垂直间距</div>
<div class="col-6">换行时的垂直间距</div>
</div>
<div class="row g-3">
<div class="col-6">等间距</div>
<div class="col-6">等间距</div>
</div>
<!-- 无间距 -->
<div class="row g-0">
<div class="col">无间距</div>
<div class="col">无间距</div>
</div>
<div class="row g-2 g-md-4 g-lg-5">
<div class="col">响应式间距</div>
</div>
<!-- 对齐行中的所有列 -->
<div class="row align-items-start">...</div>
<div class="row align-items-center">...</div>
<div class="row align-items-end">...</div>
<!-- 对齐单个列 -->
<div class="row">
<div class="col align-self-start">顶部</div>
<div class="col align-self-center">中部</div>
<div class="col align-self-end">底部</div>
</div>
<div class="row justify-content-start">...</div>
<div class="row justify-content-center">...</div>
<div class="row justify-content-end">...</div>
<div class="row justify-content-around">...</div>
<div class="row justify-content-between">...</div>
<div class="row justify-content-evenly">...</div>
<div class="row">
<div class="col order-3">DOM 中第一,视觉上最后</div>
<div class="col order-2">第二</div>
<div class="col order-1">DOM 中第三,视觉上第一</div>
</div>
<!-- 响应式排序 -->
<div class="row">
<div class="col order-md-2">在 md+ 上第二</div>
<div class="col order-md-1">在 md+ 上第一</div>
</div>
<!-- 按列偏移 -->
<div class="row">
<div class="col-md-4 offset-md-4">居中的列</div>
</div>
<!-- 使用边距工具类进行偏移 -->
<div class="row">
<div class="col-md-4 ms-auto">向右推</div>
</div>
列可以嵌套:
<div class="row">
<div class="col-9">
第一层
<div class="row">
<div class="col-6">第二层</div>
<div class="col-6">第二层</div>
</div>
</div>
</div>
当一行中放置超过 12 列时,额外的列将作为一个整体换行到新行:
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4(换行到新行,因为 9 + 4 = 13 > 12)</div>
<div class="col-6">.col-6(在新行继续)</div>
</div>
通过插入一个全宽元素强制列到新行:
<div class="row">
<div class="col-6">列 1</div>
<div class="col-6">列 2</div>
<!-- 强制后续列断行到新行 -->
<div class="w-100"></div>
<div class="col-6">列 3(在新行)</div>
<div class="col-6">列 4(在新行)</div>
</div>
使用显示工具类在特定断点处应用断行:
<div class="row">
<div class="col-6 col-sm-4">列 1</div>
<div class="col-6 col-sm-4">列 2</div>
<!-- 仅在 md 断点及以上强制断行 -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">列 3</div>
</div>
在 .row 外部使用 .col-* 类给元素指定特定宽度。在行外使用时,列的内边距会被省略:
<!-- 宽度为 25% 的元素(无需行包装器) -->
<div class="col-3 p-3 mb-2">
.col-3: 宽度为 25%
</div>
<!-- 响应式宽度 -->
<div class="col-sm-9 p-3">
.col-sm-9: 在 sm 断点以上宽度为 75%
</div>
结合浮动工具类实现响应式浮动图片:
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>文本环绕浮动图片...</p>
</div>
大间距(如 .gx-5)可能导致水平溢出。两种解决方案:
为容器添加匹配的内边距:
<div class="container px-4">
<div class="row gx-5">
<div class="col">带大间距的列</div>
<div class="col">带大间距的列</div>
</div>
</div>
或者使用 overflow-hidden 包装器:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">带大间距的列</div>
<div class="col">带大间距的列</div>
</div>
</div>
注意: Bootstrap 的 CSS 网格系统是实验性的,自 v5.1.0 起为可选功能。默认情况下是禁用的,需要在你的 Sass 配置中启用。
Bootstrap 5.3 也支持 CSS 网格:
<div class="grid">
<div class="g-col-6">半宽</div>
<div class="g-col-6">半宽</div>
</div>
<!-- 自定义列数 -->
<div class="grid" style="--bs-columns: 3;">
<div class="g-col-1">1/3</div>
<div class="g-col-2">2/3</div>
</div>
Bootstrap 提供了 z-index 工具类来控制堆叠顺序。
| 类 | 值 |
|---|---|
.z-n1 | -1 |
.z-0 | 0 |
.z-1 | 1 |
.z-2 | 2 |
.z-3 | 3 |
这些较低的单数字值(1, 2, 3)对于控制同一堆叠上下文中的组件状态(如默认、悬停和激活)非常有用。
Bootstrap 组件使用标准化的 z-index 刻度,具有较大的间隔以防止冲突:
| 组件 | z-index |
|---|---|
| 下拉菜单 | 1000 |
| 粘性定位 | 1020 |
| 固定定位 | 1030 |
| Offcanvas 背景 | 1040 |
| Offcanvas | 1045 |
| 模态框背景 | 1050 |
| 模态框 | 1055 |
| 弹出框 | 1070 |
| 工具提示 | 1080 |
| Toast 通知 | 1090 |
警告: 避免自定义单个 z-index 值。该刻度是作为一个连贯的系统设计的——如果你更改一个值,很可能需要调整其他值以保持正确的分层。使用 Sass 变量(
$zindex-dropdown、$zindex-modal等)来一致地自定义这些值。
查看 references/grid-reference.md 了解与 z-index 配合使用的位置工具类。
<div class="container-fluid">
<div class="row">
<nav class="col-md-3 col-lg-2 d-md-block sidebar">
侧边栏
</nav>
<main class="col-md-9 col-lg-10 ms-sm-auto px-md-4">
主要内容
</main>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<div class="card h-100">卡片 1</div>
</div>
<div class="col">
<div class="card h-100">卡片 2</div>
</div>
<!-- 更多卡片... -->
</div>
从源代码编译 Bootstrap 时,你可以通过 Sass 变量和混合宏自定义布局系统。
// 在导入 Bootstrap 之前覆盖
$grid-columns: 12; // 更改为 16 或 24 以获得更精细的控制
$grid-gutter-width: 1.5rem; // 调整列间隙
$enable-cssgrid: true; // 启用 CSS 网格类
// 移动优先(在断点及以上应用)
@include media-breakpoint-up(md) { ... }
// 桌面优先(在断点以下应用)
@include media-breakpoint-down(lg) { ... }
// 范围(在两个断点之间应用)
@include media-breakpoint-between(sm, xl) { ... }
// 仅单个断点
@include media-breakpoint-only(md) { ... }
无需工具类即可创建语义化网格布局:
.blog-layout {
@include make-row();
}
.blog-main {
@include make-col-ready();
@include make-col(8); // 12 列中的 8 列
}
.blog-sidebar {
@include make-col-ready();
@include make-col(4); // 12 列中的 4 列
}
查看 references/sass-customization.md 获取完整的变量参考和混合宏文档。
references/grid-reference.md - 完整的网格类参考references/sass-customization.md - 用于布局自定义的 Sass 变量和混合宏examples/responsive-layouts.html - 响应式布局模式examples/sass-customization.scss - Sass 自定义示例每周安装次数
68
仓库
GitHub 星标数
3
首次出现
2026年1月22日
安全审计
已安装于
codex59
gemini-cli59
opencode58
github-copilot52
cursor52
cline48
Bootstrap's layout system is built on flexbox and provides a powerful 12-column grid for creating responsive layouts. This skill covers containers, the grid system, breakpoints, and layout utilities.
Bootstrap's responsive design uses six default breakpoints:
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| Extra small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
Breakpoints apply at the specified width and up (mobile-first).
Containers are the fundamental building block for layouts.
<!-- Fixed-width container (max-width at each breakpoint) -->
<div class="container">...</div>
<!-- Full-width container (100% at all breakpoints) -->
<div class="container-fluid">...</div>
<!-- Responsive containers (100% until specified breakpoint) -->
<div class="container-sm">100% until sm, then fixed</div>
<div class="container-md">100% until md, then fixed</div>
<div class="container-lg">100% until lg, then fixed</div>
<div class="container-xl">100% until xl, then fixed</div>
<div class="container-xxl">100% until xxl, then fixed</div>
| xs<576px | sm≥576px | md≥768px | lg≥992px | xl≥1200px | xxl≥1400px
---|---|---|---|---|---|---
.container | 100% | 540px | 720px | 960px | 1140px | 1320px
.container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px
.container-md | 100% | 100% | 720px | 960px | 1140px | 1320px
.container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px
.container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px
.container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px
.container-fluid | 100% | 100% | 100% | 100% | 100% | 100%
The grid uses a series of containers, rows, and columns.
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</div>
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">2 of 3</div>
<div class="col">3 of 3</div>
</div>
Use .col-{number} for specific widths (1-12):
<div class="row">
<div class="col-8">8 columns wide</div>
<div class="col-4">4 columns wide</div>
</div>
<div class="row">
<div class="col-3">3 columns</div>
<div class="col-6">6 columns</div>
<div class="col-3">3 columns</div>
</div>
Combine breakpoint infixes for responsive behavior:
<!-- Stack on mobile, side-by-side on md+ -->
<div class="row">
<div class="col-12 col-md-6">Left on md+</div>
<div class="col-12 col-md-6">Right on md+</div>
</div>
<!-- Different widths at different breakpoints -->
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">Responsive column</div>
</div>
<!-- One column width set, others auto -->
<div class="row">
<div class="col">Auto</div>
<div class="col-6">6 columns</div>
<div class="col">Auto</div>
</div>
<!-- Variable width content -->
<div class="row justify-content-center">
<div class="col-auto">Variable width content</div>
</div>
Control the number of columns per row:
<!-- Always 2 columns per row -->
<div class="row row-cols-2">
<div class="col">Item 1</div>
<div class="col">Item 2</div>
<div class="col">Item 3</div>
<div class="col">Item 4</div>
</div>
<!-- Responsive: 1 on xs, 2 on sm, 3 on md, 4 on lg -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
<div class="col">Item</div>
<!-- More items... -->
</div>
Gutters are the gaps between columns. Default is 1.5rem (24px).
<div class="row gx-5">
<div class="col">Wide horizontal gutters</div>
<div class="col">Wide horizontal gutters</div>
</div>
<div class="row gy-4">
<div class="col-6">Vertical gutter when wrapping</div>
<div class="col-6">Vertical gutter when wrapping</div>
<div class="col-6">Vertical gutter when wrapping</div>
</div>
<div class="row g-3">
<div class="col-6">Equal gutters</div>
<div class="col-6">Equal gutters</div>
</div>
<!-- No gutters -->
<div class="row g-0">
<div class="col">No gutters</div>
<div class="col">No gutters</div>
</div>
<div class="row g-2 g-md-4 g-lg-5">
<div class="col">Responsive gutters</div>
</div>
<!-- Align all columns in row -->
<div class="row align-items-start">...</div>
<div class="row align-items-center">...</div>
<div class="row align-items-end">...</div>
<!-- Align individual columns -->
<div class="row">
<div class="col align-self-start">Top</div>
<div class="col align-self-center">Middle</div>
<div class="col align-self-end">Bottom</div>
</div>
<div class="row justify-content-start">...</div>
<div class="row justify-content-center">...</div>
<div class="row justify-content-end">...</div>
<div class="row justify-content-around">...</div>
<div class="row justify-content-between">...</div>
<div class="row justify-content-evenly">...</div>
<div class="row">
<div class="col order-3">First in DOM, last visually</div>
<div class="col order-2">Second</div>
<div class="col order-1">Third in DOM, first visually</div>
</div>
<!-- Responsive ordering -->
<div class="row">
<div class="col order-md-2">Second on md+</div>
<div class="col order-md-1">First on md+</div>
</div>
<!-- Offset by columns -->
<div class="row">
<div class="col-md-4 offset-md-4">Centered column</div>
</div>
<!-- Margin utilities for offsets -->
<div class="row">
<div class="col-md-4 ms-auto">Pushed right</div>
</div>
Columns can be nested:
<div class="row">
<div class="col-9">
Level 1
<div class="row">
<div class="col-6">Level 2</div>
<div class="col-6">Level 2</div>
</div>
</div>
</div>
When more than 12 columns are placed within a single row, the extra columns wrap onto a new line as one unit:
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4 (wraps to new line since 9 + 4 = 13 > 12)</div>
<div class="col-6">.col-6 (continues on the new line)</div>
</div>
Force columns to a new line by inserting a full-width element:
<div class="row">
<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6">Column 3 (on new line)</div>
<div class="col-6">Column 4 (on new line)</div>
</div>
Apply breaks at specific breakpoints using display utilities:
<div class="row">
<div class="col-6 col-sm-4">Column 1</div>
<div class="col-6 col-sm-4">Column 2</div>
<!-- Force break only at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">Column 3</div>
</div>
Use .col-* classes outside a .row to give elements a specific width. When used outside a row, column padding is omitted:
<!-- Element with 25% width (no row wrapper needed) -->
<div class="col-3 p-3 mb-2">
.col-3: width of 25%
</div>
<!-- Responsive width -->
<div class="col-sm-9 p-3">
.col-sm-9: width of 75% above sm breakpoint
</div>
Combine with float utilities for responsive floated images:
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>Text wraps around the floated image...</p>
</div>
Large gutters (like .gx-5) can cause horizontal overflow. Two solutions:
Add matching padding to the container:
<div class="container px-4">
<div class="row gx-5">
<div class="col">Column with large gutter</div>
<div class="col">Column with large gutter</div>
</div>
</div>
Or use an overflow-hidden wrapper:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">Column with large gutter</div>
<div class="col">Column with large gutter</div>
</div>
</div>
Note: Bootstrap's CSS Grid system is experimental and opt-in as of v5.1.0. It's disabled by default and requires enabling in your Sass configuration.
Bootstrap 5.3 also supports CSS Grid:
<div class="grid">
<div class="g-col-6">Half width</div>
<div class="g-col-6">Half width</div>
</div>
<!-- Custom column count -->
<div class="grid" style="--bs-columns: 3;">
<div class="g-col-1">1/3</div>
<div class="g-col-2">2/3</div>
</div>
Bootstrap provides z-index utility classes for controlling stacking order.
| Class | Value |
|---|---|
.z-n1 | -1 |
.z-0 | 0 |
.z-1 | 1 |
.z-2 | 2 |
.z-3 | 3 |
These low single-digit values (1, 2, 3) are useful for controlling component states like default, hover, and active within the same stacking context.
Bootstrap components use a standardized z-index scale with large gaps to prevent conflicts:
| Component | z-index |
|---|---|
| Dropdown | 1000 |
| Sticky | 1020 |
| Fixed | 1030 |
| Offcanvas backdrop | 1040 |
| Offcanvas | 1045 |
| Modal backdrop | 1050 |
| Modal | 1055 |
| Popover | 1070 |
| Tooltip | 1080 |
| Toast | 1090 |
Warning: Avoid customizing individual z-index values. The scale is designed as a cohesive system—if you change one value, you likely need to adjust others to maintain proper layering. Use Sass variables (
$zindex-dropdown,$zindex-modal, etc.) to customize these values consistently.
See references/grid-reference.md for position utilities that work with z-index.
<div class="container-fluid">
<div class="row">
<nav class="col-md-3 col-lg-2 d-md-block sidebar">
Sidebar
</nav>
<main class="col-md-9 col-lg-10 ms-sm-auto px-md-4">
Main content
</main>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<div class="card h-100">Card 1</div>
</div>
<div class="col">
<div class="card h-100">Card 2</div>
</div>
<!-- More cards... -->
</div>
When compiling Bootstrap from source, you can customize the layout system through Sass variables and mixins.
// Override before importing Bootstrap
$grid-columns: 12; // Change to 16 or 24 for finer control
$grid-gutter-width: 1.5rem; // Adjust column gaps
$enable-cssgrid: true; // Enable CSS Grid classes
// Mobile-first (applies at breakpoint and UP)
@include media-breakpoint-up(md) { ... }
// Desktop-first (applies BELOW breakpoint)
@include media-breakpoint-down(lg) { ... }
// Range (applies BETWEEN two breakpoints)
@include media-breakpoint-between(sm, xl) { ... }
// Single breakpoint only
@include media-breakpoint-only(md) { ... }
Create semantic grid layouts without utility classes:
.blog-layout {
@include make-row();
}
.blog-main {
@include make-col-ready();
@include make-col(8); // 8 of 12 columns
}
.blog-sidebar {
@include make-col-ready();
@include make-col(4); // 4 of 12 columns
}
See references/sass-customization.md for complete variable reference and mixin documentation.
references/grid-reference.md - Complete grid class referencereferences/sass-customization.md - Sass variables and mixins for layout customizationexamples/responsive-layouts.html - Responsive layout patternsexamples/sass-customization.scss - Sass customization examplesWeekly Installs
68
Repository
GitHub Stars
3
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex59
gemini-cli59
opencode58
github-copilot52
cursor52
cline48
impeccable:创建独特生产级前端界面,告别AI垃圾美学
7,500 周安装
专业市场研究报告生成工具 - 50+页咨询级行业分析,含PESTLE、SWOT、波特五力等框架
171 周安装
表单验证最佳实践:React Hook Form、TypeScript与Vue VeeValidate完整指南
170 周安装
竞争分析师智能体:系统性竞争对手分析、市场定位评估与战略优势识别
170 周安装
ADHD/自闭症任务拆解指南:DECOMPOSE方法助你克服执行功能障碍,提升生产力
187 周安装
查询缓存策略指南:Redis、Memcached与数据库级缓存实现多级缓存优化
171 周安装
CI/CD 流水线实战指南:GitHub Actions、GitLab CI 设计优化与安全
172 周安装