Bootstrap 栅格自定义 gutter 导致内容溢出时如何用 px 工具类或 overflow-hidden 包裹修复【免费下载链接】bootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.项目地址: https://gitcode.com/GitHub_Trending/bo/bootstrap在 Bootstrap 栅格中调大列间距gutter后行内容经常会顶出.container的左右边缘或者在页面底部多出一段溢出空间。Gutters 官方文档给出了两种修复方式在容器上加一个匹配的px-*内边距工具类或者给.row外面加一层带.overflow-hidden的包裹。这篇文章按文档示例走完这两种做法的写法、取值依据和验证方式。适用前提是页面已引入 Bootstrap CSS 并使用.container/.container-fluid、.row、.col这套栅格类。为什么自定义 gutter 会溢出先理解溢出的来源才能判断该修哪一层。根据 Gutters 与 Grid system 文档Gutter 本质是列的水平padding每一列被设置padding-right和padding-left.row再用负margin在行首尾把这段 padding 抵消使内容对齐。默认 gutter 宽1.5rem24px与 spacing 工具类 的刻度一致。Gutter 可以按断点调整.gx-*控制水平 gutter.gy-*控制垂直 gutter.g-*两者同时控制.g-0用于移除 gutter。调大 gutter 时.row的负 margin 随之变大当它超过容器自身的左右内边距时列内容就会在视觉上冲出容器。文档描述的溢出现象分两种水平溢出使用较大的gx-*时内容超出容器边缘文档称 unwanted overflow垂直溢出使用gy-*且列换行时.row下方会多出空间在页面底部可能溢出文档称 some overflow below the.rowat the end of a page。gutter 类的取值来自$guttersSass map继承自$spacers文档给出的默认值为$grid-gutter-width: 1.5rem; $gutters: ( 0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, );其中$spacer在 scss/_variables.scss 中默认为1rem。也就是说.gx-5会让列间产生3rem的水平 gutter是最容易顶破容器的一档。方式一给容器加匹配的 px 内边距工具类文档原文使用较大的水平 gutter 时.containeror.container-fluidparent may need to be adjusted too to avoid unwanted overflow, using a matching padding utility。做法是把容器的左右 padding 加大把负 margin 吸收掉。文档示例可直接在引入 Bootstrap 的页面中运行div classcontainer px-4 text-center div classrow gx-5 div classcol div classp-3Custom column padding/div /div div classcol div classp-3Custom column padding/div /div /div /div注意两点px-*的命名规则见 Spacing 文档p表示 paddingx表示同时作用于左右两侧y表示上下两侧无后缀表示四边。尺寸档位0–5默认对应$spacer的倍数可按档位查值$spacer默认1rem档位文档给出的默认值001$spacer * .252$spacer * .53$spacer4$spacer * 1.55$spacer * 3文档只要求 padding 工具类与 gutter matching没有给出固定的数值换算关系上面的官方示例是gx-5配px-4。另外文档说明可以通过向$spacersSass map 增加条目来扩展更多尺寸档位。方式二用 overflow-hidden 包裹文档把这一条列为替代方案An alternative solution给.row外面加一层带.overflow-hidden的包裹。文档示例中这层包裹就是.container本身div classcontainer overflow-hidden text-center div classrow gx-5 div classcol div classp-3Custom column padding/div /div div classcol div classp-3Custom column padding/div /div /div /div按 Overflow 工具类文档.overflow-hidden等四个类直接调整元素的overflow属性且默认不是响应式的如需扩展可用_variables.scss中的$overflows变量。官方文档将两种方案并列给出没有说明哪一种是默认首选按页面布局需求二选一即可。垂直 gutter 溢出同样用 overflow-hidden 包裹如果现象是页面底部多出溢出gy-*造成列换行后的垂直 gutter文档建议同样是围绕.row加.overflow-hidden包裹。官方示例div classcontainer overflow-hidden text-center div classrow gy-5 div classcol-6 div classp-3Custom column padding/div /div div classcol-6 div classp-3Custom column padding/div /div div classcol-6 div classp-3Custom column padding/div /div div classcol-6 div classp-3Custom column padding/div /div /div /div什么情况下不需要修文档中.g-*同时控制水平与垂直 gutter的示例使用了较小的.g-2并明确说明 there isnt a need for the.overflow-hiddenwrapper class——gutter 较小、没有顶破容器时不需要加包裹。所以先以页面上是否真的出现溢出为准只有出现溢出现象时才需要上面两种修复。验证结果文档没有提供命令行检查方式验证就是在浏览器中打开页面对照文档描述的两类溢出现象判断水平行内容不再超出容器的左右边缘即px-*工具类要消除的 unwanted overflow垂直页面底部不再出现.row下方的多余溢出空间即gy-*一节描述的 overflow below the.row。如果加了类仍无效对照示例检查类是否加在了正确的层级px-*要加在.container/.container-fluid上.overflow-hidden要加在直接包裹.row的那一层上。相关文档Guttersgutter 原理、gx-*/gy-*/g-*与两种溢出修复的原始出处Grid system栅格结构与默认 gutter 宽1.5rem的说明Spacingpx-*等内边距工具类的命名规则与尺寸档位Overflow.overflow-hidden等工具类的定义scss/_variables.scss$spacer: 1rem等默认值【免费下载链接】bootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.项目地址: https://gitcode.com/GitHub_Trending/bo/bootstrap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考