Wiersz Bootstrap z kolumnami o różnej wysokości

Question

Wiersz Bootstrap z kolumnami o różnej wysokości

Aktualnie mam coś takiego:

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Teraz zakładając, że content były pudełka o różnej wysokości, o tej samej szerokości - jak mogłem utrzymać ten sam "układ oparty na siatce", a mimo to mieć wszystkie pudełka ustawione pod sobą, zamiast w idealnych liniach.

Obecnie TWBS umieszcza następną linię col-md-4 pod najdłuższym elementem w poprzednim trzecim wierszu. w ten sposób każdy rząd przedmiotów jest idealnie wyrównany - podczas gdy jest to niesamowite, chcę, aby każdy przedmiot spadł bezpośrednio pod ostatnim elementem (układ" murarski")

44

html css twitter-bootstrap responsive-design bootstrap-4

Author: Zim, 2014-03-11

Source

3 answers

Z jakiegoś powodu to działało dla mnie bez .display-flex class

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

6

Author: Steve Whitby,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-08 18:41:52

Suma col wewnątrz rozruchu Twittera powinna wynosić za każdym razem 12. To pozwoli zachować czysty projekt siatki:

 <div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
 </div>
 <div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
 </div>
<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

0

Author: Christian Michael,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-10 20:51:37

score 77 · Accepted Answer

Jest to popularne pytanie Bootstrap, więc zaktualizowałem i rozszerzyłem odpowiedź dla Bootstrap 3 i Bootstrap 4...

The Bootstrap 3 "problem wysokości " występuje, ponieważ kolumny używają float:left. Gdy kolumna jest "pływająca", jest usuwana z normalnego przepływu dokumentu. Jest przesuwany w lewo lub w prawo, aż dotknie krawędzi pudełka zawierającego. Tak więc, gdy masz nierówne wysokości kolumn , poprawnym zachowaniem jest układanie ich na najbliższa strona.

Uwaga : poniższe opcje mają zastosowanie do column wrapping scenariusze gdzie w jednym znajduje się więcej niż 12 jednostek col .row. Dla czytelników, którzy nie rozumieją, dlaczego kiedykolwiek będzie więcej niż 12 kolców w rzędzie , lub myślą, że rozwiązaniem jest "używanie oddzielnych wierszy" , powinni przeczytać ten pierwszy

Jest kilka sposobów, aby to naprawić.. (Aktualizacja dla 2018)

1 - podejście "clearfix" ( zalecane przez Bootstrap) W ten sposób (wymaga iteracji co x kolumny). Wymusi to zawinięcie co x Liczba kolumn...

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix Demo (single tier)

Clearfix Demo (responsive tiers) - np. col-sm-6 col-md-4 col-lg-3

Istnieje również odmiana CSS-only 'clearfix'
CSS - tylko clearfix z tabele

2-Ustaw kolumny na tej samej wysokości (za pomocą flexbox):

Ponieważ problem jest spowodowany różnicą wysokości , możesz ustawić kolumnyrówne wysokości w każdym wierszu. Flexbox jest najlepszym sposobem, aby to zrobić i jest natywnie wspierany w Bootstrap 4 ...

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox equal height Demo

3-Un-float the columns an use inline-block zamiast tego..

Ponownie, problem z wysokością występuje tylko dlatego, że kolumny są unoszone. Inną opcją jest ustawienie kolumn na display:inline-block i float:none. Zapewnia to również większą elastyczność przy ustawianiu pionowym. Jednak w przypadku tego rozwiązania nie może istnieć Żadna spacja HTML między kolumnami, w przeciwnym razie elementy inline-block mają dodatkową spację i zawijają się przedwcześnie.

Demo inline block fix

4 - podejście do kolumn CSS3 (Rozwiązanie murarskie / podobne do Pinteresta)..

To nie jest natywne dla Bootstrap 3, ale inne podejście wykorzystujące CSS multi-columns. Jedną z wad tego podejścia jest kolejność kolumn od góry do dołu zamiast od lewej do prawej. Bootstrap 4 zawiera ten typ rozwiązanie : Bootstrap 4 murowane Karty Demo .

Bootstrap 3 Multi-columns Demo

5 - podejście Javascript/jQuery

W końcu możesz chcesz użyć wtyczki takiej jak izotop/murowanie:

Demo Murarskie Bootstrap
Murarskie Demo 2

Więcej o kolumnach Bootstrap o zmiennej wysokości

Aktualizacja 2018
Wszystkie kolumny mają jednakową wysokość w Bootstrap 4 , ponieważ domyślnie używa flexbox, więc "problem z wysokością" nie jest problemem. Dodatkowo, Bootstrap 4 zawiera tego typu rozwiązanie wielolumnowe: Bootstrap 4 cards Demo .