如何使用带有表格组件的 Bootstrap 3 网格系统？

Posted 2023-02-22

【中文标题】如何使用带有表格组件的 Bootstrap 3 网格系统？

【英文标题】：How to use Bootstrap 3 grid system with table component?

【发布时间】：2013-09-07 23:31:20

【问题描述】：

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

提前致谢。

【问题讨论】：

好像没有加倍边框。

【参考方案1】：

从您的 <tr> 元素中删除 row 类。该类使非表格行元素看起来像表格行，并添加了一些打破标准<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>

【讨论】：

所以在包装表格的 div 中不需要类或“行”？或者本质上，表类与在 div 上使用的行类完成相同的事情？谢谢！ - @ssorallen

col-xs-X classes 设置百分比宽度，默认情况下适用于 <td> 元素。您根本不需要使用 row 类。

注意：最好在<th> 或<colgroup> 中设置宽度类而不是单个单元格。并且单元格中的任何表单控件（输入等）都需要应用表单控件类。