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

发布时间：2020-12-18 00:16:41 所属栏目：安全来源：网络整理

导读：我已经使用Bootstrap 3开始迁移到网格系统,但文档中的示例都使用DIV： http://getbootstrap.com/css/#grid 我做了一个有点冗余的代码,将DIV类与TABLE标签/类混合在一起： http://getbootstrap.com/css/#tables 问题是布局使边界更加复杂,我认为这应该是更好

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

提前致谢.

解决方法

从< 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!