Question

我正在使用bootstrap 3.3.4，我遇到了问题。如果我检查我正在加载的bootstrap.css文件，有一个表悬停类，但是我无法使用它，它只是不起作用，我可以看到，例如以表格为边界作品。我已经检查过bootstrap.js也被加载了。有没有其他人有同样的问题？我试着搜索了这么久。提前致谢

Answer 1

从docs on table hover开始，请务必将.table-hover类添加到您的表格元素中。

另外，正如Daniel指出的那样，bootstrap会查找一个tbody来对行进行分组，因为它并不想在标题区域应用悬停样式。

此外，对于某些屏幕，默认悬停颜色可能显得非常暗淡，因此您可以尝试使用以下代码使其变暗：

.table-hover > tbody > tr:hover {
  background-color: #D2D2D2;
}

这是Stack Snippets

中的一个工作演示

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>


<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

在tbody列中使用th而不是td。这就是我使它工作的方式。使用boostrap 4.1。

bootstrap table-hover不起作用

2 个答案:

这是Stack Snippets