twitter-bootstrap 如何使用带有表格组件的 Bootstrap 3 网格系统？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18614171/
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
How to use Bootstrap 3 grid system with table component?
提问by staticdev
I have started a migration to grid system using Bootstrap 3, but the examples in the documentation are all using DIVs: http://getbootstrap.com/css/#grid
我已经开始使用 Bootstrap 3 迁移到网格系统，但文档中的示例都使用 DIV：http: //getbootstrap.com/css/#grid
I made a somewhat redundant code that mixes the DIV classes with TABLE tags/classes: http://getbootstrap.com/css/#tables
我做了一个有点多余的代码，将 DIV 类与 TABLE 标签/类混合：http: //getbootstrap.com/css/#tables
The problem is that the layout dobles the borders and I think the should be a better way of doing that. Any recommendations on that?
问题是布局使边框加倍，我认为这应该是更好的方法。对此有什么建议吗？
An example code in Fiddle: http://jsfiddle.net/7g8nV/1/
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>
Thanks in advance.
提前致谢。
回答by Ross Allen
Remove the rowclass from your <tr>elements. That class makes a non-table-row element look like a table-row and adds some styles that break a standard <tr>. You can still use the "col" classes like normal:
row从<tr>元素中删除类。该类使非表格行元素看起来像表格行，并添加了一些打破标准的样式<tr>。您仍然可以像往常一样使用“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>