Bootstrap中col未平分空间,大概率是漏写.row父容器;.row提供display: flex和margin: 0 -15px以抵消.col的padding,缺之则.col退化为块级元素,无法按12列份额分配宽度。

col没平分空间,大概率是漏了.row父容器
Bootstrap的col类本身不带宽度,它依赖.row提供的display: flex和负外边距(margin-left: -15px)来抵消col自身的padding。一旦漏写.row,col就退化为普通块级元素,各自按内容撑宽,视觉上就是“没平分”甚至错位。
- 检查DOM结构:必须是
<div class="row"><div class="col">...</div></div>,不能直接<div class="col"> - 用DevTools选中
col元素,看computed的display是否为flex——如果不是,说明.row没生效或被覆盖 - 常见干扰:自定义CSS写了
.row { display: block },或用了!important覆盖了Bootstrap的flex声明
col总和不是12,Flex分配逻辑就失效
Bootstrap栅格的“12列”不是固定网格,而是Flex份额协议:col-4对应flex: 0 0 33.333%,但前提是同级col的断点数值加起来等于12。否则浏览器按默认Flex规则处理,结果不可控。
- 两个
col-8:总和16 > 12 → 第二个自动换行,不在同一行 - 一个
col-6:总和6 - 混用
col-6和col-md-6:小屏下前者生效、后者失效,导致一宽一窄 - 验证方法:在Chrome DevTools里看
col的flex-basis值,如果不是33.333%或25%等预期值,基本就是总和不对
内容撑破col宽度,min-width: 0没加
col-4编译后是flex: 0 0 auto + max-width: 33.333%,不是width。这意味着长文本、大图、<table>等会强行撑开列宽,破坏等分。
- 给
col内部第一层内容容器(比如<div>、<p>)加style="min-width: 0",或用工具类min-w-0(Bootstrap 5.3+) - 对图片强制约束:
<img class="w-100" style="min-width: 0"> - 避免在
col里直接放<pre>或未截断URL,它们默认white-space: pre且无min-width限制 - 注意:
h-100这类高度类对宽度无影响,别指望它能“压住”内容
gap和响应式断点链断裂干扰视觉判断
Bootstrap 5+默认给.row加了gap: 1rem,它占空间但不计入列宽计算。三列col-4看着“不等宽”,常是因为gap让内容区实际可用宽度不一致。
- 移除间隙干扰:
<div class="row g-0"> - 响应式断点必须形成完整链条:只写
col-md-4,小屏下它不生效,列宽退化为auto;要全尺寸三等分,得写col-4或col-12 col-md-4 - 嵌套
.row时,子.row必须加mx-n3(不是ml-n3 mr-n3),否则负外边距无法正确抵消父col的padding,导致子列宽度压缩 - 最后一行列数不足12时,Bootstrap不会自动补空或拉伸——这不是bug,是设计使然;若需居中,得单独抽出来用
<div class="row justify-content-center">
.row、断点没兜底、内容没设min-width: 0、或者gap和padding在暗处打架。调试时优先查这四点,比反复改class高效得多。


















