gutter 类必须加在 .row 上加在 .col 或普通 div 上无效Bootstrap 5 通过 .row 的负 margin 与 .col 的正 padding 配合实现列间距仅对直接子元素为 .col 的 .row 生效。gutter 类必须加在 .row 上加在 .col 或普通 div 上完全无效Bootstrap 5 的 gutter列间距是靠 .row 的负 margin 和 .col 的正 padding 配对实现的这个机制只对直接子元素为 .col 的 .row 生效。你给 .col-6 加 mx-3看起来有空隙但会破坏 flex 换行逻辑——比如 col-md-6 在小屏下本该堆叠结果因手动外边距导致宽度超限、错位甚至溢出。gx-3、gy-2、g-lg-4 这些类只能作用于 .row或启用了 display: flex 的容器写成 div classcol-6 gx-3 —— 无任何效果DevTools 里也看不到对应 CSS 变量React-Bootstrap 等封装组件要确认是否透传 className 到原生 div.row否则类名会被吃掉响应式 gutter 要用 gx-{breakpoint}-{size}别碰 $grid-gutter-width 变量除非全局重编译想“小屏无间隙、中屏开始有 1rem、大屏变 1.5rem”最轻量做法就是直接写div classrow gx-0 gx-md-3 gx-lg-4。它会生成对应的 CSS 自定义属性--bs-gutter-x: 0、--bs-gutter-x: 1rem、--bs-gutter-x: 1.5rem且优先级高于全局变量。gx-sm-2 表示从 sm 断点≥576px起生效gx-md-0 表示从 md≥768px起取消水平 gutter改 Sass 变量 $grid-gutter-width 是全局行为需重新编译整个 Bootstrap适合统一设计规范不适合局部调整如果自定义了断点比如新增 $grid-breakpoints: (xs: 0, sm: 480px, ...)必须同步调用 include generate-gutter-classes()否则 gx-xs-2 这类类名压根不会被编译出来想取消所有 gutter用 g-0别信 no-guttersno-gutters 是 Bootstrap 4 的废弃类5 里已彻底移除。写了也不报错但毫无作用——浏览器根本找不到对应样式。真正有效的清零方式只有 g-0同时清水平垂直、gx-0仅水平、gy-0仅垂直。 arXiv Xplorer ArXiv 语义搜索引擎帮您快速轻松的查找保存和下载arXiv文章。