Bootstrap逆表和thead没有正确的样式

Bra*_*ker 14 html-table css-tables twitter-bootstrap

在处理基于Bootstrap的项目时,我遇到了一个奇怪的问题,其中一些样式被用户代理样式表(在Chrome和Firefox中)覆盖.我找到了这个相关的问题,通过包含<!DOCTYPE html>我最初省略的标签解决了这个问题.但现在我无法得到.table-inverse,.thead-inverse.thead-default类遮阳我的表头.据我所知,我有所有必要的行,容器等.

为什么阴影不起作用?

.navbar {
  border-radius: 0px
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

在JSFiddle上查看

sup*_*eck 20

对于任何像我发现这个线程,但使用引导4.0.0-beta.2或更高版本,表逆THEAD逆已被替换-黑暗每个链接的版本发布信息在这里


小智 17

确保使用<th>而不是<td>进入标题.


Pmp*_*mpr 13

你也要添加bootstrap-X.X-flex.css.

bootstrap-X.X.css
bootstrap-X.X-flex.css
bootstrap.js
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)