2016-11-23 18 views
7

Czy można zamówić Bootstrap 4 karty od lewej do prawej, po zapakowaniu w .card-columns?Bootstrap 4-rządowe podobne do murowanych karty kolumnowe poziome zamiast pionowych

góry do dołu (domyślnie):

1 3 5 
2 4 6 

lewej do prawej:

1 2 3 
4 5 6 

Ze względu na różną wysokość jest to konieczne dla mnie do korzystania z murarskie podobną siatkę.

+0

możesz to zrobić za pomocą ** css-flexbox ** –

+0

^Otwórz plik '_variables.scss' i znajdź zmienną' $ enable-flex'. Zmień go z "false" na "true". – ksav

Odpowiedz

5

Kolejność kolumn CSS jest od góry do dołu, a następnie od lewej do prawej, więc kolejność kolumn będą świadczone ..

1 3 5 
2 4 6 

Nie ma sposobu, aby zmienić kolejność kolumn CSS. Sugeruje się użycie innego rozwiązania, takiego jak masoneria.

Umożliwia także flexbox won't help, ponieważ Bootstrap card-deck używa kolumn CSS (nie flexbox) do efektu murowania. Można jednak użyć schematu flexbox card-deck i na równych kart Wzrost: http://www.codeply.com/go/YFFFWHVoRB

Inną opcją jest użycie grid along with flexbox zamiast card-deck:

można użyć nowego d-flex klasę do eliminate the extra CSS:

<div class="col-sm-4 d-flex pb-3"> 
    <div class="card card-block"> 
     Card. I'm just a simple card-block. 
    </div> 
</div> 

Powiązane: How do I make card-columns order horizontally?