Cách sử dụng hệ thống lưới Bootstrap 3 với thành phần bảng?

Question

Tôi đã bắt đầu một chuyển đổi sang hệ thống lưới điện sử dụng Bootstrap 3, nhưng các ví dụ trong tài liệu đều sử dụng DIV: http://getbootstrap.com/css/#grid

tôi đã thực hiện một mã phần nào không cần thiết mà pha trộn các lớp DIV với TABLE thẻ/classes: http://getbootstrap.com/css/#tables

Vấn đề là bố cục làm xáo trộn các đường viền và tôi nghĩ rằng nên là cách tốt hơn để thực hiện điều đó. Bất kỳ đề xuất về điều đó?

Một mã ví dụ trong 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> 

Cảm ơn trước.

Answer 1

Xóa lớp row khỏi các phần tử <tr> của bạn. Lớp đó làm cho một phần tử không phải là bảng trông giống như một hàng bảng và thêm một số kiểu phá vỡ một tiêu chuẩn <tr>. Bạn vẫn có thể sử dụng "col" lớp học như bình thường:

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