引导表响应

Question

我正处于 ReactJS 的初学者阶段。我目前正在使用 Bootstrap 3。我创建了一个包含 6 列的表，如下所示：

<div className="col-md-12">
  <div className="table-responsive">
    <StudentBody
      data={studentList}
      searchText={this.state.text}
    />
  </div>
</div>

通过使用 CSS 将鼠标悬停在 TR 上，我在其最后一列显示了 DELETE 链接。一切都以预期的方式工作。但是当我将鼠标悬停在任何 TR 和 DELETE 显示上时出现了问题，所有列都向右移动，当不悬停时，它会向初始位置移动。如何停止列的这种移动行为？ 不知道哪里出错了

Answer 1

你应该添加 position:absolute 到删除链接和

制作 TR position:relative

这将确保列在悬停时不会移动位置

更多关于CSS位置here

Answer 2

我不确定您使用什么逻辑来隐藏删除按钮。您可以通过应用具有可见性的 CSS 类来做到这一点：隐藏。不要使用 display:none

visibility:hidden 隐藏元素，但仍会占用布局空间。

display:none 从文档中删除元素。它不占用任何空间。