Bootstrap移动端列宽计算错误排查：电商线框制作疑问

你这里的核心问题是对Bootstrap 12列布局中gutter（列间距）的实现逻辑理解偏差了，不是每列宽度要单独扣除gutter，而是gutter通过列的内边距来实现，再结合容器的内边距适配移动端屏幕。

先理清楚Bootstrap移动端（<576px，xs断点）的布局规则： #

• .container 容器默认左右各有15px的内边距，所以在360px的屏幕上，容器的可用内容宽度是：360px - 15px*2 = 330px
• 12列是平分这个330px的可用宽度，因此每列的基础宽度为：330px / 12 = 27.5px
• 每列的左右各有15px的内边距——这就是你看到的30px gutter的来源：相邻两列的内边距叠加后，正好形成30px的列间距，完全不需要从列的基础宽度里扣减

为什么你的计算会得到内容区0px？ #

你直接用屏幕总宽度360px除以12得到每列30px，再减去30px gutter，这是错误的逻辑：gutter不是列宽度的扣除项，而是通过内边距实现的间距，列的总宽度是「基础宽度 + 左右内边距」，但基础宽度的计算基数是容器的可用宽度，不是屏幕总宽度。

移动端每列的实际内容宽度 #

如果要算列内可放置内容的宽度，就是每列的基础宽度：27.5px（内边距是用来隔离列与列、列与容器边缘的，内容会自动适配内边距以内的区域）。如果是整行12列，内容总宽度刚好是330px，加上容器的内边距，完美填满360px的屏幕。

额外小提示 #

如果需要调整gutter宽度，Bootstrap 5及以上版本支持通过gx-*这类工具类自定义水平间距，默认的移动端gutter就是30px（每列左右15px），完全适配移动端的窄屏场景。

内容的提问来源于stack exchange，提问作者Craig