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

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

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

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