用 outline 替代 border 调试栅格：outline 不参与盒模型、不触发重排，推荐 outline: 2px dashed #007bff；生产环境应包裹内层 div 加边框，或用伪元素 .debug-border 实现无侵入边框。
直接给 .col 加 border 会导致换行或错位，根本原因是边框在非 box-sizing: border-box 下额外撑宽，叠加默认 padding 后总宽超 100% —— 即使 Bootstrap 全局设了 border-box，第三方样式、Shadow DOM 或重置覆盖都可能让它失效。
用 outline 替代 border 做临时调试
outline 不参与盒模型计算，不影响栅格宽度，适合快速定位列边界。
-
outline不会触发重排，性能好，且能绕过所有 padding/margin 干扰 - 推荐写法：
outline: 2px dashed #007bff（虚线比实线更易区分相邻列） - 别用
outline: 1px solid—— 在高分屏下可能模糊或不可见 - 不能用于正式 UI，因 outline 不受
border-radius影响，且无法单独控制某一边
包裹内层 div 是最稳妥的生产方案
把边框加在内容容器上，让 .col 专注占位，彻底隔离布局逻辑与视觉表现。
- 结构必须是：
<div class="col-md-6"><div class="border p-3">内容</div></div> - 内层 div 的
padding可替代.col的默认px-3，避免双层内边距挤压内容 - 若需响应式边框（如仅桌面显示），直接在内层 div 上加
border-md类，不干扰栅格断点 - 注意：不要给
.row加边框 —— 它的负 margin 会让左侧/右侧边框被裁掉或缩进
自定义伪元素边框类（适合团队复用）
用 ::before 画边框，完全不改变盒模型，还能自由控制样式和圆角适配。
- 示例类定义：
.debug-border { position: relative; } .debug-border::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #adb5bd; pointer-events: none; } - 必须加
position: relative到宿主元素，否则伪元素定位失效 -
pointer-events: none确保不拦截鼠标事件，点击仍能穿透到内容 - 如果宿主有
border-radius，伪元素会自动跟随，但虚线在圆角处可能断开 —— 改用solid或加大border-width缓解
最容易被忽略的是 .container 和 .row 的边框陷阱：它们的 padding 和负 margin 是为抵消 .col 内边距而设计的，一旦加边框，视觉边界就和实际布局边界脱节。真要检查容器结构，优先用浏览器的「Layout」面板勾选 “Show layout bounds”，比手动画线可靠得多。
