我已经开始使用Bootstrap3迁移到网格系统,但是文档中的示例都是使用DIVs:http://getbootstrap.com/css/#grid
我编写了一个有点多余的代码,将DIV类与表标记/类混合在一起:http://getbootstrap.com/css/#tables
问题是布局把边框弄乱了,我认为这应该是一个更好的方式。对此有什么建议吗?
用http://jsfiddle.net/7g8nV/1/编写的示例代码:
<div class="table-responsive">
<table class="table table-bordered">
<tr class="row">
<td class="field-label col-md-3 active">
<label>Field 1:</label>
</td>
<td class="col-md-9">
Value 1
</td>
</tr>
<tr class="row">
<td class="field-label col-md-3 active">
<label>Field 2:</label>
</td>
<td class="col-md-9">
Value 2
</td>
</tr>
<tr class="row">
<td class="field-label col-md-3 active">
<label>Field 3:</label>
</td>
<td class="col-md-9">
Value 3
</td>
</tr>
</table>
</div>
提前谢谢。
发布于 2013-09-05 01:04:04
从<tr>
元素中删除row
类。该类使非表行元素看起来像表行,并添加了一些破坏标准<tr>
的样式。你仍然可以像normal一样使用"col“类:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<table class="table table-bordered">
<tr>
<td class="field-label col-xs-3 active">
<label>Field 1:</label>
</td>
<td class="col-md-9">
Value 1
</td>
</tr>
<tr>
<td class="field-label col-xs-3 active">
<label>Field 2:</label>
</td>
<td class="col-md-9">
Value 2
</td>
</tr>
<tr>
<td class="field-label col-xs-3 active">
<label>Field 3:</label>
</td>
<td class="col-md-9">
Value 3
</td>
</tr>
</table>
https://stackoverflow.com/questions/18614171
复制相似问题