तालिका घटक के साथ बूटस्ट्रैप 3 ग्रिड सिस्टम का उपयोग कैसे करें?

Question

मैं बूटस्ट्रैप 3 का उपयोग ग्रिड प्रणाली के लिए एक प्रवास शुरू कर दिया है, लेकिन दस्तावेज में उदाहरण सभी DIVs उपयोग कर रहे हैं: http://getbootstrap.com/css/#tables: http://getbootstrap.com/css/#grid

मैं कुछ हद तक एक निरर्थक कोड है कि टेबल टैग/वर्गों के साथ DIV कक्षाएं घुलमिल कर दिया

समस्या यह है कि लेआउट सीमाओं को डबल्स करता है और मुझे लगता है कि ऐसा करने का एक बेहतर तरीका होना चाहिए। उस पर कोई सिफारिशें?

फिडल में एक उदाहरण कोड: 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> 

अग्रिम धन्यवाद।

Answer 1

row कक्षा को <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>