twitter-bootstrap Bootstrap 逆表和 thead 样式不正确
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35233768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap inverse table and thead not styling correctly
提问by Bradley Parker
While working on a Bootstrap-based project, I came across a strange issue where some of the styling was being overridden by the user agent stylesheet (in Chrome and Firefox). I found this related issue, which was solved by including the <!DOCTYPE html>tag I had initially omitted. But now I can't get the .table-inverse, .thead-inverse, or .thead-defaultclasses to shade my table headers. As far as I understand, I have all the necessary rows, containers, etc in place.
在处理基于 Bootstrap 的项目时，我遇到了一个奇怪的问题，其中一些样式被用户代理样式表（在 Chrome 和 Firefox 中）覆盖。我发现了这个相关问题，通过包含<!DOCTYPE html>我最初省略的标签解决了这个问题。但现在我无法得到.table-inverse，.thead-inverse或.thead-default类遮阳我的表头。据我了解，我已准备好所有必要的行、容器等。
Why isn't the shading working?
为什么阴影不起作用？
.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>采纳答案by Pmpr
You have to add bootstrap-X.X-flex.csstoo.
你也必须添加bootstrap-X.X-flex.css。
bootstrap-X.X.css
bootstrap-X.X-flex.css
bootstrap.js
Where X.Xis the version number
X.X版本号在哪里
OR
或者
Use this CDNs:
使用此 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>
回答by superbeck
回答by Edgar Diaz
Be sure you are using < th > instead < td > into header.
确保您使用 < th > 而不是 < td > 进入标题。
回答by Eric Foster
Easy enough. The CSS sheet you're linking to in your fiddle doesn't include the .table-inversestyling.
很容易。您在小提琴中链接到的 CSS 表不包含.table-inverse样式。
回答by gdmanandamohon
It happens for the older versions of bootstrap only. Because the class thead-inverseis not available there. You can just add this design to your design cssI hope it will definitely work as I have done so. The reason behind this is thead-inverseis only available in recent versions of bootstrap.cssonly.
它仅适用于较旧版本的引导程序。因为thead-inverse那里没有课程。您可以将此设计添加到您的设计中，css我希望它一定能像我一样工作。这背后的原因 thead-inverse是仅在最近版本中可用bootstrap.css。
.thead-inverse th {
color: #fff;
background-color: #373a3c;
}
