Question

我继承了一个项目，该项目具有在表格中使用的Bootstrap“span”类。

以下标记是否有效？如果没有，为什么？

<table class="table">
  <tr>
    <td class="span6">Hello</td>
    <td class="span3">World</td>
    <td class="span3">2013</td>
  </tr>
</table>

我觉得用Bootstrap设置列宽是不对的。

Answer 1

它不是错误的，但有一种更有效的方法来设置表格中的列宽。您可以使用表的<td/>标记，而不是在每个<colgroup/>上设置类。它专门用于格式化表格列。

<table class="table">
  <colgroup>
    <col class="span6" />
    <col class="span3" />
    <col class="span3" />
  </colgroup>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  ...
</table>

Answer 2

标记完全有效。它们实际上不是span元素，只是CSS样式。只有这样，CSS样式才能满足开发人员的需求。但是，这些可能会改变未来版本并导致意外影响 - 因此不建议这样做。

Answer 3

在Bootstrap 2.x中，您可以在thead th元素中设置只，而不是每行。

<table class="table">
  <thead>
    <tr>
      <th class="span6">Words</th>
      <th class="span3">More Words</th>
      <th class="span3">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World</td>
      <td>2013</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
      <td>2014</td>
    </tr>
    ...
  </tbody>
</table>

对于Bootstrap 3.x，将spanX替换为col-sm-X

Twitter Bootstrap span类是否适合设置表列宽？

3 个答案: