twitter-bootstrap – 如何使用Bootstrap 3网格系统与表组件?

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 如何使用Bootstrap 3网格系统与表组件?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经使用Bootstrap 3开始迁移到网格系统,但文档中的示例都使用DIV:
http://getbootstrap.com/css/#grid

我做了一个有点冗余的代码,将DIV类与TABLE标签/类混合在一起:
http://getbootstrap.com/css/#tables

问题是布局使边界更加复杂,我认为这应该是更好的方法.有什么建议吗?

Fiddle中的示例代码http://jsfiddle.net/7g8nV/1/

  1. <div class="table-responsive">
  2. <table class="table table-bordered">
  3. <tr class="row">
  4. <td class="field-label col-md-3 active">
  5. <label>Field 1:</label>
  6. </td>
  7. <td class="col-md-9">
  8. Value 1
  9. </td>
  10. </tr>
  11. <tr class="row">
  12. <td class="field-label col-md-3 active">
  13. <label>Field 2:</label>
  14. </td>
  15. <td class="col-md-9">
  16. Value 2
  17. </td>
  18. </tr>
  19. <tr class="row">
  20. <td class="field-label col-md-3 active">
  21. <label>Field 3:</label>
  22. </td>
  23. <td class="col-md-9">
  24. Value 3
  25. </td>
  26. </tr>
  27. </table>
  28. </div>

提前致谢.

解决方法

从< tr>中删除行类元素.该类使非表行元素看起来像一个表行,并添加了一些破坏标准< tr>的样式.你仍然可以像普通的那样使用“col”类:
  1. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  2.  
  3. <table class="table table-bordered">
  4. <tr>
  5. <td class="field-label col-xs-3 active">
  6. <label>Field 1:</label>
  7. </td>
  8. <td class="col-md-9">
  9. Value 1
  10. </td>
  11. </tr>
  12. <tr>
  13. <td class="field-label col-xs-3 active">
  14. <label>Field 2:</label>
  15. </td>
  16. <td class="col-md-9">
  17. Value 2
  18. </td>
  19. </tr>
  20. <tr>
  21. <td class="field-label col-xs-3 active">
  22. <label>Field 3:</label>
  23. </td>
  24. <td class="col-md-9">
  25. Value 3
  26. </td>
  27. </tr>
  28. </table>

猜你在找的Bootstrap相关文章