Bootstrap表响应

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

我不确定您使用什么逻辑来隐藏删除按钮。您可以通过应用带有visibility：hidden的CSS类来实现。不要使用display：none

visibility：hidden隐藏了元素，但它仍然占用了布局中的空间。

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