twitter-bootstrap Bootstrap：条纹 div 表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17782795/
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: Striped div table
提问by Lugaru
I'm using Bootstrap css lib. I know how to make striped table with this lib but how to make striped div's?
我正在使用 Bootstrap css 库。我知道如何用这个库制作条纹表，但如何制作条纹 div？
For ex:
例如：
<table id="newtable" class="table table-bordered table-striped fixedtable">
<thead>
<th>Date</th>
<th>Info</th>
<th>Price</th>
</thead>
<tbody>
<tr>
<td colspan="3">
<div>text 1</div>
<div>text 2</div>
<div>text 3</div>
<div>text 4</div>
</td>
</tr>
</tbody>
</table>
Question is: How to make: <div>text 1</div>, <div>text 2</div>, <div>text 3</div>, <div>text 4</div>striped?
问题是：如何制作：<div>text 1</div>, <div>text 2</div>, <div>text 3</div>, <div>text 4</div>条纹？
采纳答案by jsalonen
Twitter Bootstrap's striping only works for table rows. So in order to stripe your divs you need to add each of them into a new row. For instance:
Twitter Bootstrap 的条带化仅适用于表格行。因此，为了对您的 div 进行条带化，您需要将它们中的每一个添加到一个新行中。例如：
<tr>
<td>
<div>text 1</div>
</td>
</tr>
<tr>
<td>
<div>text 2</div>
</td>
</tr>
...
Also I'm not sure what you trying to achieve with colspan="3". If you want to create a proper table you need to create new tdfor each column. For instance:
另外我不确定你想用colspan="3". 如果要创建合适的表，则需要td为每一列创建新表。例如：
<tr>
<td>2013-07-22</td>
<td>Text for info field 1</td>
<td>9.99</td>
</tr>
回答by shukshin.ivan
use td div:nth-of-type(odd|even)
利用 td div:nth-of-type(odd|even)
The following CSS3 example works in modern browsers
以下 CSS3 示例适用于现代浏览器
<style>
td div:nth-of-type(odd) {
background: #e0e0e0;
}
td div:nth-of-type(even) {
background: #FFFFFF;
}
</style>
<table id="newtable" class="table table-bordered table-striped fixedtable">
<thead>
<th>Date</th>
<th>Info</th>
<th>Price</th>
</thead>
<tbody>
<tr>
<td colspan="3">
<div>text 1</div>
<div>text 2</div>
<div>text 3</div>
<div>text 4</div>
</td>
</tr>
</tbody>
</table>
回答by Rondakay
Add class legend to your container and then for every other row actually in the divs within that row you can apply a format
将类图例添加到您的容器中，然后对于该行内的 div 中的其他每一行，您可以应用一种格式
CSS
.legend .row:nth-of-type(odd) div {
background-color:antiquewhite;
}
.legend .row:nth-of-type(even) div {
background: #FFFFFF;
}
<div class="container legend">
<div class="row">
<div class="col-sm-2">text</div>
<div class="col-sm-2">more Text</div>
</div>
<div class="row">
<div class="col-sm-2">text</div>
<div class="col-sm-2">more Text</div>
</div>
</div>
