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

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>

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?

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.

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>

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

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

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>

zawiń karty do środka

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

lub

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

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:

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>

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>

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.

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>

to działało dobrze dla mnie:

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

wymuszanie naszego CSS na ogólnym CSS bootstraps.

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?

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
});

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.