4 kolumn do 2 kolumny z Twitter Bootstrap

Question

Mam 4 kolumny płynu-układ:

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

dla urządzeń mobilnych, bootstrap renderuje kolumnach jeden pod drugim, który działa dobrze:

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

Ale dla tabletów, chciałbym mieć 2 kolumny z 2:

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

Czy to możliwe osiągnąć to zachowanie natywnie z boo tstrap?

Answer 1

Dowiedziałem się, że Fundacja Zurb (http://foundation.zurb.com/docs/grid.php#threeBlockEx) oferuje tę fonctionality, ale chcę kontynuować z Twitter Bootstrap. Udało mi się więc dodać niestandardową regułę opartą na technice używanej przez Fundację:

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

Answer 2

Musisz po prostu zastąpić CSS dla przęseł w zapytaniu @media odpowiadającym tabletom.

Więc można spróbować czegoś takiego:

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

oczywiście korekty konieczne może być wykonane. Z powodu wypełnienia i marginesów szerokość może w rzeczywistości nie wynosić 50%.

Answer 3

Hmm. Próbowałem obu tych reguł w moim CSS i żadne z nich nie działało dla mnie. Szkoda, że ​​tego nie ma w BS 2.0. Mam nadzieję, że dodadzą go w BS 3.0!

Dzięki,

JK

Answer 4

Dodawanie do odpowiedzi Emilie trzeba też zresetować szerokości kolumn,

@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%; 
    } 
}