17

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/#gridCách sử dụng hệ thống lưới Bootstrap 3 với thành phần bảng?

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.

+0

Nó dường như không tăng gấp đôi biên giới. – LeftyX

Trả lời

44

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>

+3

vì vậy không có lớp hoặc "hàng" là cần thiết trong một div gói bảng? hoặc về cơ bản lớp bảng đang thực hiện điều tương tự như lớp hàng thực hiện khi được sử dụng trên các div? cảm ơn! - @ssorallen – timbrown

+5

Lớp ['col-xs-X'] (https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L903) đặt độ rộng phần trăm, làm việc theo mặc định cho các phần tử ''. Bạn không cần sử dụng lớp 'row'. –

+4

NB: Tốt hơn là đặt các lớp chiều rộng trong '' hoặc '' thay vì các ô riêng lẻ. Và bất kỳ điều khiển biểu mẫu nào (đầu vào, v.v.) trong ô cần phải áp dụng lớp điều khiển biểu mẫu. –