Bootstrap 5 stretched links仅移动端部分表格行点击失效问题排查

问题场景 #

用PHP循环生成数百行数据的表格，借助Bootstrap 5的stretched-link实现整行可点击功能：

• 桌面端、Chrome开发者工具模拟移动端时，所有行的链接跳转都正常
• 真实移动端设备上，页面加载时可见的前9行表格无法关联对应行的链接，全部指向表格最后一行；页面折叠区域（需滚动查看）的行则功能正常
• 经排查，该问题是Bootstrap已知的position-relative定位不准确bug导致

原始代码片段 #

<tr class="position-relative">
    <td class="position-static">
        <div class="container d-flex align-items-center">
            <div class="expansion-icon d-inline-block me-1">
                <img class="img-fluid" src="img-source">
            </div>
            <div class="expansion-link d-inline-block">
                <a href="link" class="stretched-link text-reset text-decoration-none">Content</a>
            </div>
        </div>
    </td>
    <td>Content</td>
    <td>Content</td>
</tr>

修复方案 #

方案1：为每行添加独立z-index

移动端渲染时，前几行的stretched-link可能被后续行的定位元素覆盖，通过给每个<tr>设置递增的z-index，确保每行的链接层级独立，避免覆盖：

修改PHP循环代码，动态生成z-index：

<?php foreach ($data as $index => $item): ?>
<tr class="position-relative" style="z-index: <?= $index + 1 ?>">
    <td class="position-static">
        <div class="container d-flex align-items-center">
            <div class="expansion-icon d-inline-block me-1">
                <img class="img-fluid" src="img-source">
            </div>
            <div class="expansion-link d-inline-block">
                <a href="<?= $item['link'] ?>" class="stretched-link text-reset text-decoration-none"><?= $item['content'] ?></a>
            </div>
        </div>
    </td>
    <td><?= $item['content'] ?></td>
    <td><?= $item['content'] ?></td>
</tr>
<?php endforeach; ?>

方案2：用JavaScript实现整行点击（绕开Bootstrap定位bug）

如果不想依赖Bootstrap的stretched-link定位逻辑，直接通过JS绑定行点击事件，彻底避免定位问题：

1. 移除<tr>的position-relative类和<a>的stretched-link类
2. 添加JS监听代码：

document.querySelectorAll('tr[data-href]').forEach(row => {
    row.style.cursor = 'pointer';
    row.addEventListener('click', () => {
        window.location.href = row.getAttribute('data-href');
    });
});

修改后的PHP循环代码：

<?php foreach ($data as $item): ?>
<tr data-href="<?= $item['link'] ?>">
    <td>
        <div class="container d-flex align-items-center">
            <div class="expansion-icon d-inline-block me-1">
                <img class="img-fluid" src="img-source">
            </div>
            <div class="expansion-link d-inline-block">
                <span class="text-reset text-decoration-none"><?= $item['content'] ?></span>
            </div>
        </div>
    </td>
    <td><?= $item['content'] ?></td>
    <td><?= $item['content'] ?></td>
</tr>
<?php endforeach; ?>

方案说明 #

• 方案1通过z-index调整层级，解决Bootstrap定位元素的覆盖问题，保留了stretched-link的原生样式和交互
• 方案2完全绕开Bootstrap的定位逻辑，兼容性更强，不会受框架bug影响

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