4 cột 2 cột với Twitter Bootstrap

Question

Tôi có một 4 cột chất lỏng-layout:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span3">A</div> 
     <div class="span3">B</div> 
     <div class="span3">C</div> 
     <div class="span3">D</div> 
    </div> 
</div> 

[ A ][ B ][ C ][ D ] 

Đối với thiết bị di động, bootstrap làm cho các cột một dưới khác, trong đó hoạt động tốt:

[   A    ] 
[   B    ] 
[   C    ] 
[   D    ] 

Nhưng đối với máy tính bảng, tôi muốn có 2 cột 2:

[  A  ][  B  ] 
[  C  ][  D  ] 

Có thể đạt được hành vi này một cách tự nhiên với boo không tstrap?

Answer 1

Tôi phát hiện ra rằng Zurb Foundation (http://foundation.zurb.com/docs/grid.php#threeBlockEx) cung cấp tính năng fonctionality này, nhưng tôi muốn tiếp tục với Twitter Bootstrap. Vì vậy, tôi đã quản lý để thêm quy tắc tùy chỉnh, dựa trên kỹ thuật mà Quỹ sử dụng:

@media (min-width: 768px) and (max-width: 979px) { 
    .row-fluid > [class*=span]:nth-child(2n+1) { 
     clear: both; 
     margin-left: 0; 
    } 
} 

Answer 2

Bạn chỉ cần ghi đè CSS cho các nhịp trong truy vấn @media tương ứng với máy tính bảng.

Vì vậy, bạn có thể thử một cái gì đó như thế này:

// Tablets & small desktops only 
@media (min-width: 768px) and (max-width: 979px) { 
    [class*=span] { 
    width: 50%; 
    } 
} 

Tất nhiên, những điều chỉnh có thể cần phải được thực hiện. Bởi vì đệm và lề, chiều rộng có thể không thực sự là 50%.

Answer 3

Hmm. Tôi đã thử cả hai quy tắc trong CSS của tôi và cả hai đều không làm việc cho tôi. Đó là một sự xấu hổ rằng điều này là mất tích trong BS 2.0. Tôi hy vọng họ thêm nó vào BS 3.0!

Cảm ơn,

JK

Answer 4

Thêm vào câu trả lời Emilie của bạn cũng cần phải thiết lập lại độ rộng của các cột,

@media (min-width: 768px) and (max-width: 979px) { 
    .row-fluid > [class*=span]:nth-child(2n+1) { 
     clear: both; 
     margin-left: 0; 
    } 

    .row-fluid .span3 { 
     width: 48.61878453038674%; 
    } 
}