Bootstrap 5 拉伸链接不适用于移动设备上的某些重复元素

Question

我有一个包含数百行的表格，该表格由重复出现的 PHP 脚本生成。在 Bootstrap 5 中，我使用拉伸链接使表格的整行都可以点击。这在桌面上完全符合预期，并使用 Chrome 的开发工具来模拟移动设备。但是，当从实际手机访问时（从两个设备测试），表的前 9 行没有与相关行关联的链接，而是表中的最后一行。表中所有剩余的行都按预期运行。我该如何解决这个问题，因为在网络浏览器上使用开发工具时问题没有出现？作为参考，下面是重复出现的代码片段。所有内容都是纯文本，没有特殊字符。

编辑：我确定它仅对页面加载时可见的那些元素无法正常工作。因此，“非首屏”的所有内容都按预期工作。相对位置的不准确性似乎是引导程序中的一个已知错误。

<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>

Answer 1

根据我过去遇到过类似问题的经验。

我改变了

<a>

标签的位置，使其直接位于列之前的行中，然后我使用拉伸链接使该行可点击。

你可以有两个链接。

一行之后的一个（这是代码中

<div>

之后的容器

<td>

标签）和另一个您最初链接它但这次删除拉伸链接的地方。

这在过去对我有用。见以下代码：

<tr class="position-relative">
    <td class="position-static">
        <div class="container d-flex align-items-center">
        <a href="link" class="stretched-link text-reset text-decoration-none"></a><!-- New link with out text -->
            <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="text-reset text-decoration-none">Content</a><!-- Remove stretched-link here -->
            </div>
        </div>
    </td>
    <td>Content</td>
    <td>Content</td>
</tr>

Answer 2

这似乎是 Bootstrap 的一个已知问题。曾经有一个未解决的问题（https://github.com/twbs/bootstrap/issues/28608），但现在已关闭，但似乎没有修复。

我的经验是，当页面加载到移动浏览器（使用 Safari 和 Chrome for iOS 测试）时，与 相关联的拉伸链接不适用于视口中的项目。视口外的项目按预期工作。