直接加 margin 到网格列上会破坏三栏布局，因 .col-* 宽度为百分比，加 margin 后总宽超 100% 导致换行；应将间距交由内部容器 .sec 管理，避免影响网格计算。
直接加 margin 到网格列上，90% 的换行错乱和水平滚动都源于此。
为什么给 .col-* 加 margin 会破坏三栏布局
Bootstrap 或自定义的 .col-lg-4 类默认按百分比（如 33.333%）分配宽度，但一旦加上 margin-left: 15px，实际占用空间就变成 33.333% + 15px + 15px —— 超过 100%，flex 容器立刻换行，尤其在 992px 这类临界断点处最明显。
常见错误现象包括：
- 桌面端本该三列并排，却第二列被挤到下一行
- 平板端（
col-md-6）两列正常，第三列莫名独占一行 - 手机端单列时，左右留白不一致，疑似 margin 没清除干净
根本原因不是 CSS 写错了，而是职责没分清：.col-* 只该管“占多宽、排几列”，不该管“离邻居多远”。
.sec 容器才是间距的唯一合法落点
把所有视觉间距逻辑统一交给内部内容容器（比如你命名的 .sec），就能彻底解耦结构与样式。它不参与网格计算，只负责自身渲染，margin 不会影响父级 flex/grid 的尺寸判定。
实操建议：
- HTML 中每个
.col-*内只包一层语义清晰的内容容器，例如<div class="sec"></div> - CSS 中移除所有对
.col-*的margin和padding声明 - 给
.sec设置margin: 16px 8px—— 上下 16px 保证垂直呼吸感，左右 8px 在桌面端自动形成列间空隙，且在手机单列时不会导致溢出 - 务必加
box-sizing: border-box到.sec，否则 padding + border 会撑大元素，干扰响应式计算
用 gap 替代 margin 的前提和限制
如果你用的是 Flexbox 或 Grid 布局（而非 Bootstrap 的 float/flex 混合），gap 是更干净的方案：它由父容器控制子项间距，不改变子项自身盒模型。
但要注意：
-
gap在 Flexbox 中仅支持现代浏览器（Chrome 104+、Firefox 103+、Safari 16.4+），IE 完全不支持 - Bootstrap 5 的
.row默认启用了gap，但前提是禁用grid类或确保未降级到旧版栅格系统 - 如果项目需兼容 Safari 15.x 或更低版本，
gap不能单独依赖，仍要 fallback 到.sec方案 -
gap无法实现“首项无上边距、末项无下边距”这类不对称需求，此时必须回到内容容器上做精细控制
真正容易被忽略的不是怎么加间距，而是谁该承担这个责任——网格类一旦开始管视觉，就等于把结构逻辑和表现逻辑焊死在一起，后续任何断点调整、列数增减、主题切换都会变得脆弱。把 margin 锁进 .sec，是让响应式布局可维护的第一道防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
