bootstrap网格基于12列响应式布局，需严格嵌套container/row/col三层结构，支持断点适配、自动均分、偏移排序及嵌套，实现移动优先的灵活布局。

Bootstrap 的网格系统基于 12 列响应式布局，使用 HTML + Bootstrap 只需按规范写容器、行、列三类结构，就能自动实现等分、偏移、嵌套和断点适配。

基础结构：container / row / col

必须按层级嵌套，否则样式失效：

• container 或 container-fluid 作为最外层（提供左右内边距或全宽）
• row 必须放在 container 内，用于清除浮动并创建水平轴（自带负外边距）
• col-* 必须放在 row 内，代表具体列宽（如 col-4 占 4/12 = 1/3 宽度）

示例：三等分布局（每列占 4 列）

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<div class="container">
  <div class="row">
    <div class="col-4">左侧</div>
    <div class="col-4">中间</div>
    <div class="col-4">右侧</div>
  </div>
</div>

响应式断点：适配不同屏幕

Bootstrap 提供 5 个断点前缀：col-（超小屏）、col-sm-（小屏）、col-md-（中屏）、col-lg-（大屏）、col-xl-（超大屏）。可组合使用，实现“移动优先”的渐进增强。

• 单列在手机上堆叠，平板起并排：用 col-12 col-md-6 col-lg-4
• 一行两列（小屏竖排，中屏横排）：<div class="col-12 col-md-6"> <li>某列只在桌面显示？加 <code>d-none d-lg-block 类控制显隐

自动布局与内容自适应

不写具体列数时，Bootstrap 会自动均分剩余空间：

• col（无数字）→ 等宽伸缩列（如 3 个 col 平分整行）
• col-auto → 宽度由内容撑开（适合按钮、标签等）
• 混用更灵活：例如 <div class="col-8"></div> <div class="col-auto">操作</div>

偏移、排序与嵌套技巧

常用辅助类提升布局控制力：

• 向右偏移：用 offset-md-2（中屏及以上右移 2 列）
• 改变视觉顺序：加 order-1 / order-md-12 调整列序（不影响 DOM 结构）
• 嵌套网格：在 col 内再放 row 和 col（注意嵌套 row 不需要额外 container）