Bootstrap 栅格游乐场

可视化构建响应式 Bootstrap 5.3 栅格布局，并复制精确的类名 —— row、col、偏移、排序、间距与对齐。

预览点击某一列进行编辑

生成的 HTML

—

所有处理都在您的浏览器中完成 —— 不会上传任何内容。

断点

您设置的类名将从此断点起向上生效。切换断点即可构建响应式布局。

行 .row

row-cols

gutter g-*

gutter-x gx-*

gutter-y gy-*

justify-content

align-items

列

选中的列

col

offset

order

align-self

关于 Bootstrap 栅格游乐场

Bootstrap 栅格演练场使用真正的 Bootstrap 5.3 栅格系统构建响应式的行列布局。最多可向一行中添加 12 列，点击任意一列设置其宽度、偏移和顺序，并调整行的间距和对齐方式——预览和生成的标记会随每次改动实时更新。

由于 Bootstrap 栅格是移动优先的，断点切换器至关重要：将某一列在基础状态下设为 col-6，在 md 断点设为 col-md-4，你就在不写一行代码的情况下构建出了经典的"移动端堆叠、桌面端三栏并排"模式。偏移、顺序和间距类都采用相同的响应式后缀。

输出结果是干净可直接粘贴的 HTML——一个 row 容器及其列子元素，带有你配置的确切类名。可以复制整个代码片段，也可以只复制行类；一切都在你的浏览器本地运行。

Bootstrap 的栅格宽度为 12 个单位。跨度总和超过 12 的列会在同一行内换到新的一行——这是预期行为，也常被有意用来创建多行栅格。

给列设置全宽的基础值（col-12），再在某个断点设置更窄的跨度，比如 col-md-4。在 768px 以下列会堆叠；从 md 起向上则三列并排。断点切换器正是用来构建这种效果的。

偏移会把一列向右推动若干个栅格单位（offset-md-2 跳过两个单位）。使用偏移可以让单独一列居中，或创造有意的留白，而不必插入空的填充列。

可以——行上的间距工具类可以控制列之间的水平和垂直间距。演练场把这些选项和行对齐选项放在一起，它们和其他栅格类一样支持响应式后缀。

是的，完全免费。构建器只在你的浏览器中运行，所以你的布局不会被上传或存储到服务器端。