加 border 的卡片换行是因为 box-sizing: content-box 导致宽度超出：width 只控内容区，padding 和 border 额外叠加，三列 33.33% 加边框后超 100%。
border 本身不导致换行，真正翻车的是 box-sizing: content-box —— 它让 border 和 padding 额外加在你写的宽度之外，三列 33.33% 加上边框后轻松超 100%，浏览器只能折行。
为什么加了 border 的卡片突然换行？
默认盒模型下，width: 33.33% 只管内容区；padding: 1rem 和 border: 1px solid 是额外“撑出去”的。比如 Bootstrap 的 .col-md-4 默认带左右 padding，再加 border，实际宽度 = 33.33% + 左右 padding + 左右 border。DevTools 的 Computed 面板里如果看到 box-sizing: content-box，问题就坐实了。
常见触发点包括：
- 某处写了
* { box-sizing: content-box !important }—— 一行代码废掉整套栅格 - UI 库或富文本编辑器重置了全局
box-sizing - 父容器（如
.card）被设为content-box，导致内部所有子项计算失准
全局修复：三行 CSS 必须写对
只写 * { box-sizing: border-box } 是不够的，它不覆盖 ::before 和 ::after，还容易被后加载样式覆盖。
正确写法是：
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
这样能确保所有元素（含伪元素）都继承统一的盒模型逻辑。注意：某些表单控件（如 input、textarea）会被 UA 样式强制设为 content-box，需单独显式覆盖：input, textarea { box-sizing: border-box; }
局部修复时，别依赖继承
如果不能改全局（比如嵌入第三方组件），必须在卡片类上显式声明：
.card { box-sizing: border-box; }
.card img { display: block; width: 100%; }
尤其注意以下几点：
- 不要只给图片加
border，而忘了卡片容器本身也有padding或border—— 它们叠加后一样会超宽 -
outline不占布局空间，调试时可用outline: 2px dashed #007bff替代border快速验证是否真由边框引起 - 包一层内层
div也是有效手段：<div class="col-md-4"><div style="border: 1px solid #dee2e6; padding: 1rem;">内容</div></div>
用了 border-box 还换行？检查这些隐藏点
box-sizing: border-box 解决了尺寸膨胀，但不等于布局自动完美。内容区变窄后，新瓶颈可能浮现：
- 长单词或连续无空格文本（如 URL、token）在缩窄区域里更容易换行，需加
overflow-wrap: break-word - Flex/Grid 中，
min-width: auto（默认值）可能阻止子项收缩，导致无法适应border占用后的剩余空间 - 浮动布局中，父容器若有
padding却没设box-sizing: border-box，其width: 100%子项仍会溢出 - 别忽略
outline：它不占布局空间，但:focus下的默认虚线框可能视觉上“撑开”，误判为border问题
真正容易被忽略的不是 border 本身，而是 min-content 计算、父容器余量是否足够——这些都得同步重验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
