Tablo bileşeni ile Bootstrap 3 ızgara sistemi nasıl kullanılır?

Question

I özyükleme 3 ile ızgara sistemi için bir taşıma başlamıştır, ancak, belgelerde örnekler DIV'leri tüm kullanırken: http://getbootstrap.com/css/#tables: http://getbootstrap.com/css/#grid

I TABLO etiketler/sınıfları ile DIV sınıfları karışımları biraz fazla kod yapılan Sorun şu ki, bu düzen, sınırları çiziyor ve bence bunu yapmanın daha iyi bir yolu olmalı. Bu konuda herhangi bir öneriniz var mı?

oynamam örneği kodu: önceden 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> 

teşekkürler.

Answer 1

<tr> öğelerin row sınıfından kaldırın. Bu sınıf bir tablo olmayan satır öğesi bir tablo satırı gibi görünür ve standart bir <tr> kopan bazı stilleri ekler. Hala normal gibi "sütun" sınıflarını kullanabilirsiniz:

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