【多端适配血泪史】手机端排版撞破边框、卡片下方凭空多出 4 个空白方块？深挖 WordPress wpautop 陷阱

超过 65% 的自媒体读者来自移动端（手机与平板）。如果读者在手机上点开你的「关于我们」或「联系站长」页面，看到的是被挤破屏幕、字小如蚂蚁、还带着多余空白烂框的排版，他们绝不会再点开第二次。

一、 翻车解密：两大导致手机排版崩溃的元凶

▲ 图 1：老汪真机截图：关于我们页面边距冲突溢出，卡片下方甚至凭空多出整排空白长方块

1. 致命的“卡片套卡片”（Card in Card 边距叠加冲突）

很多 WordPress 主题（如 OneNav）的 page.php 模板在最外层已经自带了 .panel.card（带有 1.25rem 内边距）。如果你在后台内容里又画了一层外边距的 .card，在桌面端看起来正常，但在 375px~390px 的手机小屏上，内边距与 Bootstrap .row 的负 15px 外边距产生惨烈碰撞，整张卡片立刻被硬生生顶出屏幕右侧边缘！

2. WordPress 经典的 `wpautop` 行内标签割裂陷阱

▲ 图 2：特写镜头：卡片下方莫名其妙凭空多出来的 4 个空白残片长方块

很多朋友为了让整张卡片能点击，习惯用 <a href="..."><div>...</div></a>。
但 WordPress 原生的 wpautop 格式化引擎认为：“行内标签 <a> 不能直接包裹块级标签 <div>！” 于是它自作聪明地在中间强行切断，并疯狂塞入 </p><p><a></p>，最终在网页下方凭空渲染出 4 个丑陋的幽灵空白框！

二、 彻底治本：Bootstrap 4 标准热区穿透与流体控制

定位清楚两个病灶之后，我们彻底重构了该页面的 HTML 骨架：

• 采用 .stretched-link 标准热区穿透：卡片外层由纯正的 div.card 承载，内部链接由绝对定位的透明 <a class="stretched-link"> 全卡覆盖。彻底规避 wpautop 标签切碎缺陷；
• 大图标与大气字体比例：矢量图标拉大到 3rem (48px)，标题提升至 1.25rem 加粗，说明文字 0.95rem，拒绝小家子气；
• 流体二维码与防抖规则：二维码强制搭配 img-fluid 与 max-width: 200px，并在全局维持 overflow-x: hidden，无论任何尺寸屏幕均能 2×2 优雅居中。

三、 总结：移动端体验是独立站的尊严

在电脑前做网站，永远别忘了拿出你的真实手机刷一刷。
解决 Card-in-Card 边距冲突与 wpautop 幽灵标签，不仅拯救了页面的视觉，更是在守住每一个从移动端慕名而来的真实读者。