mcpField
B
bootstrap-layout

bootstrap-layout

github.com/sjnims设计与 UI97 次安装
代码仓库

关于 bootstrap-layout

面向 Bootstrap 5.3 页面开发者的布局参考技能，涵盖响应式容器、12 列网格与布局工具类，并提供 Sass 定制说明。

主要功能

  1. 01响应式断点与容器
  2. 0212 列网格和列宽控制
  3. 03间距、对齐与排序
  4. 04嵌套、换行和列断点
  5. 05Sass 变量与混入定制

适用场景

  1. 01构建适配多种屏幕的页面布局
  2. 02配置侧边栏或卡片网格
  3. 03调整列间距与对齐方式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sjnims/bootstrap-expert --skill bootstrap-layout

安装后在 Claude Code 中输入/bootstrap-layout确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

examples/
responsive-layouts.html
sass-customization.scss
references/
grid-reference.md
sass-customization.md

详细介绍

Bootstrap 5.3 布局系统

Bootstrap 的布局系统基于 flexbox 构建，并提供功能强大的 12 列网格，用于创建响应式布局。本技能涵盖容器、网格系统、断点和布局工具类。

断点

Bootstrap 的响应式设计使用六个默认断点：

断点类名后缀尺寸
超小无<576px
小sm≥576px
中md≥768px
大lg≥992px
超大xl≥1200px
超超大xxl≥1400px

断点在指定宽度及以上生效（移动优先）。

容器

容器是布局的基础构建块。

容器类型

<div class="container">...</div>


<div class="container-fluid">...</div>


<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
.container100%540px720px960px1140px1320px
.container-sm100%540px720px960px1140px1320px
.container-md100%100%720px960px1140px1320px
.container-lg100%100%100%960px1140px1320px
.container-xl100%100%100%100%1140px1320px
.container-xxl100%100%100%100%100%1320px
.container-fluid100%100%100%100%100%100%

网格系统

网格由一系列容器、行和列组成。

基本结构
<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>
指定列宽

使用 .col-{number} 指定宽度（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>
响应式列

组合断点后缀以实现响应式行为：


<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>


<div class="row">
  <div class="col-12 col-sm-6 col-lg-4">Responsive column</div>
</div>
自动布局列

<div class="row">
  <div class="col">Auto</div>
  <div class="col-6">6 columns</div>
  <div class="col">Auto</div>
</div>


<div class="row justify-content-center">
  <div class="col-auto">Variable width content</div>
</div>

行列

控制每行的列数：


<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>


<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
  <div class="col">Item</div>
  
</div>

间距

间距是列之间的空隙。默认值为 1.5rem（24px）。

水平间距（gx-*）
<div class="row gx-5">
  <div class="col">Wide horizontal gutters</div>
  <div class="col">Wide horizontal gutters</div>
</div>
垂直间距（gy-*）
<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>
水平和垂直间距（g-*）
<div class="row g-3">
  <div class="col-6">Equal gutters</div>
  <div class="col-6">Equal gutters</div>
</div>


<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>

列对齐

垂直对齐

<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">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>


<div class="row">
  <div class="col order-md-2">Second on md+</div>
  <div class="col order-md-1">First on md+</div>
</div>
偏移类

<div class="row">
  <div class="col-md-4 offset-md-4">Centered column</div>
</div>


<div class="row">
  <div class="col-md-4 ms-auto">Pushed right</div>
</div>

嵌套

列可以嵌套：

<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>

高级网格行为

列换行

当单个行中放置的列超过 12 个时，多出的列会作为一个整体换到新行：

<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>
列换行控制

插入一个全宽元素，强制列换到新行：

<div class="row">
  <div class="col-6">Column 1</div>
  <div class="col-6">Column 2</div>
  
  <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>

使用显示工具类在特定断点处应用换行：

<div class="row">
  <div class="col-6 col-sm-4">Column 1</div>
  <div class="col-6 col-sm-4">Column 2</div>
  
  <div class="w-100 d-none d-md-block"></div>
  <div class="col-6 col-sm-4">Column 3</div>
</div>
独立列类

在 .row 外使用 .col-* 类可为元素指定宽度。在行外使用时，不会添加列内边距：


<div class="col-3 p-3 mb-2">
  .col-3: width of 25%
</div>


<div class="col-sm-9 p-3">
  .col-sm-9: width of 75% above sm breakpoint
</div>

结合浮动工具类，可实现响应式浮动图片：

<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>
处理间距溢出

较大的间距（如 .gx-5）可能导致水平溢出。可通过以下两种方式解决：

为容器添加对应的内边距：

<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>

或者使用 overflow-hidden 包装元素：

<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>

CSS Grid（替代方案）

**注意：**Bootstrap 的 CSS Grid 系统仍处于实验阶段，自 v5.1.0 起需选择启用。默认情况下该功能处于禁用状态，需在 Sass 配置中启用。

Bootstrap 5.3 也支持 CSS Grid：

<div class="grid">
  <div class="g-col-6">Half width</div>
  <div class="g-col-6">Half width</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>

Z-index 工具类

Bootstrap 提供 z-index 工具类，用于控制堆叠顺序。

工具类
类值
.z-n1-1
.z-00
.z-11
.z-22
.z-33

这些个位数的较小值（1、2、3）适用于在同一堆叠上下文中控制组件的默认、悬停和激活等状态。

组件堆叠顺序

Bootstrap 组件采用标准化的 z-index 刻度，并留有较大的间隔以避免冲突：

组件z-index
下拉菜单1000
粘性定位1020
固定定位1030
Offcanvas 遮罩层1040
Offcanvas1045
模态框遮罩层1050
模态框1055
弹出框1070
工具提示1080
Toast1090

Warning： 避免单独自定义 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">
      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>
  
</div>

Sass 自定义

从 Bootstrap 源码进行编译时，可以通过 Sass 变量和 mixin 自定义布局系统。

关键变量
// 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
媒体查询 Mixin
// 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) { ... }
网格 Mixin

无需使用工具类即可创建语义化网格布局：

.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
}

请参阅 references/sass-customization.md，了解完整的变量参考和 mixin 文档。

更多资源

参考文件
  • references/grid-reference.md - 完整的网格类参考
  • references/sass-customization.md - 用于自定义布局的 Sass 变量和 mixin
示例文件
  • examples/responsive-layouts.html - 响应式布局模式
  • examples/sass-customization.scss - Sass 自定义示例

评论

支持 Markdown