Bootstrap 反转 table 并且广告样式不正确

Question

在处理 Bootstrap-based 项目时，我遇到了一个奇怪的问题，即某些样式被用户代理样式表覆盖（在 Chrome 和 Firefox 中）。我找到了 this related issue，这是通过包含我最初省略的 <!DOCTYPE html> 标签解决的。但是现在我无法使用 .table-inverse、.thead-inverse 或 .thead-default类来遮蔽我的 table headers。据我所知，我已经准备好所有必要的行、容器等。

为什么阴影不起作用？

.navbar {
  border-radius: 0px
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<h2 class="display-1">Bootstrap 4 Inverse Table</h2>

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <table class="table table-inverse">
        <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>
    </div>
  </div>
</div>

View on JSFiddle

Answer 1

很简单。您在 fiddle 中链接到的 CSS sheet 不包含 .table-inverse 样式。

Answer 2

你也必须添加 bootstrap-X.X-flex.css。

bootstrap-X.X.css
bootstrap-X.X-flex.css
bootstrap.js

其中X.X是版本号

或

使用此 CDN：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

Answer 3

确保您在 header.

中使用 < th > 而不是 < td >

Answer 4

它只发生在 bootstrap 的旧版本上。因为 class thead-inverse 在那里不可用。您可以将此设计添加到您的设计中 css 我希望它一定会像我这样做的那样工作。这背后的原因是 thead-inverse 仅在 bootstrap.css 的最新版本中可用。

.thead-inverse th {
            color: #fff;
            background-color: #373a3c;
        }

Answer 5

对于像我这样找到此线程但使用 Bootstrap 4.0.0-beta.2 或更高版本的人，table-inverse 和 thead-inverse 已根据链接的版本发布信息替换为 -dark here

Bootstrap 反转 table 并且广告样式不正确

Bootstrap inverse table and thead not styling correctly

twitter-bootstrap

html-table

css-tables