twitter-bootstrap 无法让 .table-striped 类工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16759789/
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
Can't get .table-striped class to work
提问by redshift
I can't get my table-stripe class to work with my Bootstrap framework.
我无法让我的 table-stripe 类与我的 Bootstrap 框架一起使用。
Here's a live preview of my table. I have the .table-striped class set in my HTML, but it's not showing on the output.
这是我的表的实时预览。我在我的 HTML 中设置了 .table-striped 类，但它没有显示在输出中。
What am I doing wrong?
我究竟做错了什么？
回答by mathieugagne
Your html is wrong. You have a tbodytag for each row but the css for .table-stripedrelies on tr:nth-child()to style the rows differently:
你的html是错误的。tbody每行都有一个标签，但 css for.table-striped依赖于tr:nth-child()以不同的方式设置行的样式：
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th
Fix your html so that you have a single tbody to iterate through.
修复您的 html，以便您可以遍历单个 tbody。
Also, I saw both the bootstrap.css and bootstrap.min.css in your resources. One is enough.
另外，我在您的资源中看到了 bootstrap.css 和 bootstrap.min.css。一个就够了。
回答by Kristy
The problem is with your table markup. You have each row wrappped in a tbody tag and according to the bootstrap documentation:
问题在于您的表格标记。您将每一行都包装在一个 tbody 标签中，并根据引导程序文档：
Adds zebra-striping to any table row within the via the :nth-child CSS selector (not available in IE7-8).
通过 :nth-child CSS 选择器（在 IE7-8 中不可用）将斑马条纹添加到任何表格行。
So if you go through and remove all the tbody tags so that there is just one at the beginning of your table body and one at the end, it should work as expected.
因此，如果您遍历并删除所有 tbody 标签，以便在表体的开头只有一个，在表体的末尾只有一个，它应该会按预期工作。
回答by Lanlan82
Just an additional information, the ng-repeat should be on:
只是一个附加信息，ng-repeat 应该在：
<tr> inside <tbody>:
<tr> inside <tbody>:
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-1"></th>
<th class="col-md-5"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="v1 in v">
<td><span class="glyphicon glyphicon-trash"/></td>
<td>{{v1.name}}</td>
</tr>
</tbody>
</table>
