Bootstrap 弹性布局演练场
可视化构建 Bootstrap 5.3 弹性布局，并直接复制精确的工具类——d-flex、justify-content、align-items、order、grow 等。
预览
点击项目即可编辑
生成的 HTML
—
所有处理均在浏览器中完成，不会上传任何内容。
你设置的类将从此断点及更大尺寸开始生效。切换断点即可构建响应式布局。
容器
项目
0
所选项目
关于 Bootstrap 弹性布局演练场
Bootstrap Flex 演练场让你用真正的 Bootstrap 5.3 工具类而非原生 CSS 来构建 flexbox 布局。通过分段控件配置容器——方向、换行、justify-content、align-items、间距——点击任意元素设置它自己的 align-self、order、grow 和 shrink 工具类，实时预览会立即重新排列。
断点切换器是让这个工具超越玩具级别的关键：选择 sm、md、lg、xl 或 xxl，从该断点开始设置的类就会带上响应式后缀——justify-content-md-between、flex-lg-row——正如 Bootstrap 移动优先系统从该断点开始向上应用的方式一样。最多可添加 12 个元素来模拟真实组件。
布局满意后，复制生成的 HTML，或只复制容器类，直接粘贴到你的项目中。一切都在你的浏览器中运行，不会上传任何内容。
如何使用 Bootstrap 弹性布局演练场
- 用分段控件设置容器工具类——方向、换行、justify-content、align-items 和间距。
- 添加或移除元素（2 到 12 个），以匹配你实际的组件。
- 点击某个元素，为它设置自己的 align-self、order 或 flex 尺寸工具类。
- 切换断点，添加从 sm、md、lg、xl 或 xxl 起向上生效的响应式变体。
- 查看实时预览，然后复制生成的 HTML 或容器类。
常见问题
Bootstrap 是移动优先的：在某个断点设置的类会从该宽度开始向上生效。选中 md 时设置 justify-content-between，会生成 justify-content-md-between，它从 768px 起生效，并在更大屏幕上持续保持。
这个工具输出的是 Bootstrap 5.3 工具类（d-flex、justify-content-center、order-2），可直接用于 Bootstrap 项目。Flexbox 演练场则生成纯 CSS 属性——根据你的技术栈选择合适的那个。
可以。点击预览中的任意元素以选中它，然后设置它专属的工具类，例如 align-self、order、grow 和 shrink。生成的 HTML 会准确显示每个元素被分配的类。
2 到 12 个之间。这个范围涵盖了从简单的两栏页头到完整工具栏的各种情况，同时让预览在你实验时保持清晰易读。
是的，免费，且完全在你的浏览器中运行——无需注册，你构建的任何内容都不会被上传到任何地方。
热门搜索
Bootstrap 弹性布局演练场
Bootstrap flexbox 生成器
Bootstrap 5 flex 工具类
d-flex 类生成器
justify-content align-items Bootstrap
Bootstrap flex 类构建器
响应式 flexbox Bootstrap 工具
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。