Jak sprawić, by karty Bootstrap 4 miały taką samą wysokość w kolumnach kart?


134

Używam Bootstrap 4 alpha 2 i wykorzystuję karty. W szczególności pracuję z tym przykładem zaczerpniętym z oficjalnych dokumentów. Jak sprawić, by wszystkie karty miały taką samą wysokość?

Teraz myślę tylko o ustawieniu następującej reguły CSS:

.card {
    min-height: 200px;
}

Ale to jest tylko zakodowane rozwiązanie, które nie zadziała w ogólnym przypadku. Moim zdaniem kod jest taki sam jak ten w dokumentach, tj .:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block text-xs-center">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="card">
    <img class="card-img" data-src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

Jakieś wysiłki do tej pory? Jakiś kod do udostępnienia?
baao

2
Ten przykład dotyczy kolumn podobnych do muru. Cały sens tego stylu polega na tym, że karty mają różną wysokość. Użyj decku i włącz tryb Flexbox, jeśli chcesz równych wysokości.
Quentin

1
Talia działa tylko dla kart w rzędzie. Chcę tego samego efektu, card-columnsale utrzymywania tej samej wysokości.
blueSurfer

Odpowiedzi:


163

Możesz umieścić klasy w „wierszu” lub „kolumnie”? Nie będzie widoczny na kartach (obramowaniu), jeśli użyjesz go w rzędzie. https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

<div class="container">
    <div class="row">
          <div class="col-lg-4 d-flex align-items-stretch">

Niektóre z pozostałych odpowiedzi wydają się „zwariowane”. Po co używać minimalnej wysokości lub, co gorsza, stałej wysokości?

Myślałem, że ten problem (równe wysokości) był częścią powodu progresji z dala od pływających bloków div?


3
h-100 nie jest stałą wysokością, to wysokość na 100% (rzędu)
konyak

to powinna być odpowiedź
ACed

To jest prawdziwa odpowiedź
Andrew Bullock

@konyak yeah, zdaję sobie sprawę, że kolego. Nie mam na myśli h-100 (przewiń w dół tej strony).
Kerry7777

139

Używam Bootstrap 4 (Beta 2). Tymczasem wydaje się, że sytuacja się zmieniła. Miałem ten sam problem i znalazłem łatwe rozwiązanie. To jest mój kod:

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

Z "col-sm-12 col-lg-6" sprawiłem, że karty są responsywne. Za pomocą „karty h-100” ustawiłem wszystkie karty na wysokość ich kolumny nadrzędnej. W moim systemie to działa, ale nie jestem profesjonalistą. Więc mam nadzieję, że komuś pomogłem.


16
so simple h-100
PNC

9
.h-100 - genialny
JCraine

2
To załatwiło sprawę, gdy d-flexspowodowało problemy z IE (które muszę wspierać). Właśnie dodałem a mb-4do nadrzędnego elementu DIV, aby nieco bardziej rozdzielić karty.
Charles Paske

można także użyć .pre-przewijania, aby przewijać w pionie
Muhammad Waqas Aziz

Dodałbym klasę .py-2 do wszystkich elementów div z klasą .col- *, aby dodać dopełnienie między wierszami.
konyak

93

Najlepsze rozwiązanie, Bootstrap 4 ma wszystko, czego potrzebujesz: UŻYWAJ .d-flexi .flex-fillklasę. Nie używaj ich, card-decksponieważ nie reagują. Użyłem col-sm, możesz użyć .colwybranej klasy lub użyć col-lg-xx oznacza liczbę szerokości kolumn np. 4 lub 3 dla najlepszego widoku, jeśli post ma wiele niż 3 lub 4 w kolumnie

Oto bestia, spróbuj zmniejszyć okno przeglądarki do XS, aby zobaczyć ją w akcji:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


1
Ta odpowiedź działa świetnie! Jeśli nie możesz użyć „card-column” lub „card-deck”, aby uzyskać pożądane responsywne zachowanie we wszystkich widocznych obszarach.
Getsomepeaches

To zadziałało dla mnie. Mam kolumnę z jedną dużą kartą, a po prawej drugą kolumnę z dwoma rzędami. tak więc lewa karta zajmuje wysokość dwóch sąsiednich rzędów, dzięki!
Erich García

To była droga. Próbowałem, card-columns ale nie mogło to zająć więcej niż 3 kolumny na wiersz. Dzięki za tę odpowiedź
Yeku Wilfred Chetat

talia kart nie działała w moim przypadku, twoja odpowiedź zadziałała!
TBG

31

Możesz zastosować klasę h-100, która oznacza wysokość 100%.


12

AKTUALIZACJA: W Bootstrap 4 , flexbox jest teraz domyślny i każdycard-deck wiersz będzie zawierał 3 karty. Karty wypełnią się do pełnej wysokości.

http://www.codeply.com/go/x91w5Cl6ip

Bootstrap 4 alpha card-columns używa kolumn CSS3, które tak naprawdę nie obsługują równych wysokości (z wyjątkiem wypełniania kolumn, które jest obsługiwane tylko w Firefoksie).

Jeśli zamiast tego włączysz tryb Flexbox Bootstrap 4, możesz zamiast tego użyć card-decki trochę CSS, aby wyrównać wysokość i zawijać co 3 kolumny.

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

Powiązana
karta Bootstrap o tej samej wysokości w Col


Rozwidliłem twój codeply, żeby coś przetestować; Muszę też rozciągnąć tytuły, aby miały taką samą wysokość, co nie ma miejsca w tym przypadku: codeply.com/go/fqnQZ2ZGJy - w każdy możliwy sposób mogę sprawić, by moje „krótsze tytuły” miały taką samą wysokość jak dłuższy tytuł? Próbowałem bawić się flexboxem i siatkami, ale nie wydaje mi się, żebym to robił.
davewoodhall

11

Oto jak to zrobiłem:

CSS:

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML:

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

4

zawiń karty do środka

<div class="card-group"></div>

lub

<div class="card-deck"></div>


3

Przyjąłem nieco inne podejście. Korzystanie z opakowania talii kart

Dodałem regułę stylu, która ogranicza wysokość bloku karty:

.card .card-block {max-height:300px;overflow:auto;}

Daje to następujący wynik: wprowadź opis obrazu tutaj


3

Możesz użyć talii kart, wyrówna ona wszystkie karty ... to pochodzi z oficjalnej strony bootstrap 4.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

2

Innym przydatnym podejściem są siatki kart :

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>


1

Najbardziej minimalny sposób na osiągnięcie tego (o którym wiem) :

  • Zastosuj .text-monospacedo wszystkich tekstów na karcie.
  • Ogranicz wszystkie teksty na kartach do tej samej liczby znaków.

AKTUALIZACJA

Dodaj .text-truncatetytuł karty i / lub inne teksty. To zmusza teksty do jednego wiersza. Wykonanie kart o tej samej wysokości.


Myślę, że nie masz takiej odpowiedzi. Każda karta lub sekcja działającej strony internetowej będzie wyraźnie zawierała różne ilości tekstu (znaków) i użyje czcionek / krojów pisma, które nie są czcionkami o stałej szerokości. Dlaczego miałbyś chcieć skrócić zawartość tekstową, której odwiedzający (nie mogą) przeczytać?
Kerry7777

@ Kerry7777, możesz chcieć przyciąć długi ciąg i dodać „...” na końcu, aby poinformować użytkowników, że został obcięty. Aby odczytać cały ciąg, będą musieli go kliknąć lub najechać kursorem. W ten sposób możemy uzyskać spójność wyświetlanych treści. Ponieważ zawartość nie jest taka sama. Niektóre są krótkie, inne długie, a przestrzeń na ekranie jest ograniczona.
doncadavona

1
W niektórych przypadkach to tylko długość tekstu powoduje, że karty mają nierówną wysokość. Więc ta odpowiedź jest przydatna.
Mohammed Shareef C,

1

Jestem w tym nowicjuszem, więc proszę wybacz, jeśli czegoś mi brakuje.

Próbowałem wielu z powyższych. Jeśli ustawisz wysokość = 100%, karta będzie zawsze rozszerzać się do największej długości najdłuższej karty. Kontener będzie ograniczał wszystkie do tej samej długości.

Chciałem zobaczyć pojemnik, więc użyłem koloru tła, aby pomóc mi zobaczyć, co się dzieje.

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

0

to działało dobrze dla mnie:

<div class="card card-body " style="height:80% !important">

wymuszanie naszego CSS na ogólnym CSS bootstraps.


0

Natknąłem się na ten problem, większość ludzi używa jQuery ... Oto moje rozwiązanie. „Nie przejmuj się, jestem tylko początkującym w tym ...”

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}
     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

Jeśli wysokość dowolnego elementu karty wynosi np. 400px (w oparciu o jego zawartość), ponieważ domyślnym ustawieniem flex-align jest stretch, wówczas rozciągnięty zostanie plik .card-item (element potomny wiersza lub klasy kolekcji kart). ustawienie wysokości karty na 100% rodzica zajmie tę pełną wysokość.

Mam nadzieję, że miałem rację. Jestem?


-3

Jeśli ktoś jest zainteresowany, istnieje wtyczka jquery o nazwie: jquery.matchHeight.js

https://github.com/liabru/jquery-match-height

matchHeight sprawia, że ​​wysokość wszystkich wybranych elementów jest dokładnie równa. Obsługuje wiele skrajnych przypadków, które powodują niepowodzenie podobnych wtyczek.

Do rzędu kart używam:

<div class="row match-height">

Następnie włącz w całej witrynie:

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

-12

jsfiddle

Po prostu dodaj żądaną wysokość w CSS, na przykład:

.card{
    height: 350px;
}

Będziesz musiał dodać własny CSS.

Jeśli sprawdzisz dokumentację, dotyczy to stylu Masonry - chodzi o to, że nie wszystkie są tej samej wysokości.


Wygląda na to, że zawartość kart nie jest odpowiednio wyrównana. To rozwiązanie jest zbyt ręczne. Zastanawiam się, czy jest coś bardziej „inteligentnego”
blueSurfer

Możesz spróbować czegoś z jQuery, aby dynamicznie tworzyć wysokość. Zależy, co chcesz z nimi zrobić.
PlatinumJay,

Jestem po prostu ciekawy, dlaczego tak wielu nie głosuje za odpowiedzią? bo wygląda na to, że to działa
Kick Buttowski

2
Czy to nie oznacza, że ​​karta ma stałą wysokość, a nie responsywną równą wysokość?
Robert Andrews
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.