Jak używać systemu siatkowego Bootstrap 3 z komponentem stołu?

Question

I rozpoczęły migrację do systemu sieci używając Bootstrap 3, ale przykłady w dokumentacji są za pomocą DIV: http://getbootstrap.com/css/#grid

zrobiłem nieco nadmiarowy kod, który miesza klasy DIV ze stołem tagów/klas: http://getbootstrap.com/css/#tables

Problem polega na tym, że układ doble granic i myślę, że powinien to być lepszy sposób na zrobienie tego. Wszelkie zalecenia w tej sprawie?

Przykładowy kod w 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> 

góry dzięki.

Answer 1

Usuń klasę row ze swoich elementów <tr>. Ta klasa sprawia, że ​​element bez tabeli wierszy wygląda jak wiersz tabeli i dodaje kilka stylów, które łamią standard <tr>. Nadal można korzystać z „col” klas jak normalny:

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