twitter-bootstrap - 如何将 Bootstrap 3 网格系统与表格组件一起使用？

Question

我已经开始使用 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>

提前致谢。

Answer 1

删除row来自您的类(class) <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>