Bootstrap 4布局异常：figcaption内链接仅移动端可点击求助

这种元素层级重叠导致点击区域被吞掉的问题，在响应式布局里真的很容易踩坑，尤其是当不同屏幕尺寸下元素排列方式变化时，之前我也碰到过类似的情况。结合你排查到的“旧代码段落覆盖链接悬浮区域”的结论，给你几个针对性的修复方案：

1. 先精准定位覆盖元素 #

用浏览器开发者工具（按F12打开），选中caption里的链接元素，切换到Elements面板的Layers标签（Chrome/Firefox都有这个功能），就能直观看到哪个段落元素在链接上方。也可以在Styles面板里检查该段落的position、z-index、margin/padding是否超出了自身容器范围，导致覆盖到caption区域。

2. 针对性修复方案 #

方案一：提升链接的层级优先级 #

给caption里的链接设置更高的z-index，同时要确保它的父元素（比如figcaption或figure）设置了非static的定位（比如position: relative），这样z-index才会生效：

figure figcaption a {
  position: relative;
  z-index: 10; /* 数值只要比覆盖它的段落的z-index高就行 */
}

方案二：让覆盖段落不拦截点击事件 #

如果那个覆盖的段落本身不需要响应任何点击操作，可以给它设置pointer-events: none，这样点击会直接穿透到下面的链接：

.your-overlapping-paragraph-class {
  pointer-events: none;
}

注意：如果这个段落里有需要点击的元素，这个方案不适用，得换其他方法。

方案三：调整布局避免元素重叠 #

从根源上解决问题，修改响应式布局的规则：

• 检查小屏幕之外的布局，调整段落的margin、padding，或者用Flex/Grid的gap属性来控制元素间距，不让它超出自身容器覆盖到caption。
• 如果是使用了浮动布局，记得给父容器清除浮动，避免元素错位重叠。

关于JFiddle无法复现的问题 #

这大概率是因为JFiddle的沙箱环境和你的项目环境不一致：比如项目里有全局的CSS重置样式、父容器的overflow属性设置、第三方UI框架的样式影响，或者某些自定义的布局规则没有同步到JFiddle里。你可以尝试把项目里相关的HTML结构、全局CSS（包括引入的框架样式）逐步复制到JFiddle，就能复现问题方便调试了。

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