我已经开始使用Bootstrap 3迁移到网格系统,但文档中的示例都使用DIV: http://getbootstrap.com/css/#grid
我做了一个有点冗余的代码,它将DIV类与TABLE标签/类混合: http://getbootstrap.com/css/#tables
问题是布局使边界变得困难,我认为应该是更好的方法。有关于此的任何建议吗?
Fiddle中的示例代码: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>
提前致谢。
答案 0 :(得分:50)
从row
元素中删除<tr>
类。该类使非表行元素看起来像表行,并添加了一些破坏标准<tr>
的样式。您仍然可以使用&#34; col&#34;正常的课程:
<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>
&#13;