Bootstrap 拉伸链接在 Chrome 和 Edge 上断开，但在 Firefox 上有效答案

【问题标题】：Bootstrap stretched-link broken on Chrome and Edge, but works on FirefoxBootstrap 拉伸链接在 Chrome 和 Edge 上断开，但在 Firefox 上有效
【发布时间】：2020-04-22 17:56:43
【问题描述】：

我现在遇到了一个奇怪的问题。我有一个包含几个帐户列表的表格，所有这些列表都有一个可点击的 ID 号。我使用stretched-link 将链接延伸到整行，它在Firefox 中完美运行。但是，在与我的团队会面时，我们发现 Chrome 和 Edge 中的链接非常损坏。出于某种原因，最底部的stretched-link 会延伸到整个页面，而不是仅限于表格行。

这是一个展示问题的 JSFiddle：https://jsfiddle.net/v7ut1jL0/1/

为什么会这样？

【问题讨论】：

标签： twitter-bootstrap google-chrome firefox

【解决方案1】：

我觉得不仅是最后一个，而且所有链接都占用了全身空间。

这是 Bootstrap 存储库 https://github.com/twbs/bootstrap/issues/28608 中的一个未解决问题。

正如comment中提到的，这可能是由于

"'position:relative' 对 table-row-group 的影响，表头组、表尾组、表行、表列组、 table-column、table-cell 和 table-caption 元素未定义。"

在此处查看documentation reference

【讨论】：

谢谢。在这一点上，我觉得恢复到display: table 而不是尝试使用table 标签可能是最简单的。