Bagaimana cara membuat kartu Bootstrap 4 memiliki tinggi yang sama di kolom kartu?

Saya menggunakan Bootstrap 4 alpha 2 dan memanfaatkan kartu. Secara khusus, saya sedang mengerjakan contoh ini diambil dari dokumen resmi. Bagaimana saya bisa membuat semua kartu memiliki tinggi yang sama?

Yang bisa saya pikirkan sekarang adalah mengatur aturan CSS berikut:

.card {
    min-height: 200px;
}

Tapi itu hanya solusi kode keras yang tidak akan berfungsi dalam kasus umum. Kode dalam pandangan saya sama dengan yang ada di dokumen yaitu:

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

Anda bisa meletakkan kelas di "baris" atau "kolom"? Tidak akan terlihat di kartu (perbatasan) jika Anda menggunakannya di baris. 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">

Beberapa dari jawaban lain di sini tampak 'aneh'. Mengapa menggunakan ketinggian minimum atau lebih buruk lagi ketinggian tetap?

Saya pikir masalah ini (ketinggian yang sama) adalah bagian dari alasan untuk menjauh dari div blok mengambang?

Saya menggunakan Bootstrap 4 (Beta 2). Sementara situasinya tampaknya telah berubah. Saya memiliki masalah yang sama dan menemukan solusi yang mudah. Ini kode saya:

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

Dengan "col-sm-12 col-lg-6" saya telah membuat kartu menjadi responsif. Dengan "kartu h-100" saya telah mengatur semua kartu ke ketinggian kolom induknya. Di sistem saya, ini berfungsi, tetapi saya bukan seorang profesional. Jadi, semoga saya membantu seseorang.

Solusi terbaik, Bootstrap 4 memiliki semua yang Anda butuhkan: GUNAKAN THE .d-flexdan .flex-fillkelas. Jangan gunakan card-deckskarena tidak responsif. Saya dulu col-sm, Anda dapat menggunakan .colkelas yang Anda inginkan, atau menggunakan col-lg-xx berarti jumlah kolom lebar misalnya 4 atau 3 untuk tampilan terbaik jika posting memiliki banyak maka 3 atau 4 per kolom

Inilah binatangnya, coba kurangi jendela browser ke XS untuk melihatnya beraksi:

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

Anda dapat menerapkan kelas h-100, yang berarti tinggi 100%.

UPDATE: Di Bootstrap 4 , flexbox sekarang default, dan setiap card-deckbaris akan berisi 3 kartu. Kartu akan terisi penuh.

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

Bootstrap 4 alpha card-columnsmenggunakan kolom CSS3 yang tidak benar-benar mendukung ketinggian yang sama (kecuali kolom-isi yang hanya didukung di Firefox).

Jika Anda malah mengaktifkan mode flexbox Bootstrap 4, Anda dapat menggunakan card-deckdan sedikit CSS untuk menyamakan tinggi dan membungkus setiap 3 kolom.

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

http://codeply.com/go/YFFFWHVoRB

Kartu Bootstrap Terkait
dengan Tinggi yang sama di Col

Inilah cara saya melakukannya:

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>

bungkus kartu di dalamnya

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

atau

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

Saya mengambil pendekatan yang sedikit berbeda. Menggunakan pembungkus Card Deck

Saya menambahkan aturan gaya yang membatasi tinggi blok kartu:

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

Ini memberikan hasil sebagai berikut:

Anda dapat menggunakan kartu-deck, ini akan menyelaraskan semua kartu ... ini berasal dari halaman resmi 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>

Pendekatan berguna lainnya adalah Card Grids :

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

Cara paling minimal untuk mencapai ini (yang saya tahu) :

• Menerapkan .text-monospace untuk semua teks di dalam kartu.
• Batasi semua teks di kartu dengan jumlah karakter yang sama.

MEMPERBARUI

Tambahkan .text-truncatejudul kartu dan atau teks lainnya. Ini memaksa teks menjadi satu baris. Pembuatan kartu memiliki tinggi yang sama.

Saya seorang pemula dalam hal ini jadi mohon maaf jika saya kehilangan sesuatu.

Saya mencoba banyak cara di atas. Jika Anda mengatur tinggi = 100%, kartu akan selalu memuai hingga panjang terbesar dari kartu terpanjang. Kontainer akan membatasi semua dengan panjang yang sama.

Saya ingin melihat wadahnya, jadi saya menggunakan warna latar belakang untuk membantu saya melihat apa yang sedang terjadi.

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

ini bekerja dengan baik untuk saya:

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

memaksa CSS kita di atas bootstraps CSS umum.

Saya menemukan masalah ini, kebanyakan orang menggunakan jQuery ... Inilah solusi saya. "Tidak apa-apa, saya hanya pemula dalam hal ini ..."

.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

Jika ada tinggi item kartu misalnya 400px (berdasarkan isinya), karena default untuk flex-align adalah stretch, maka .card-item (anak dari baris atau kelas card-collection) akan diregangkan. membuat tinggi kartu menjadi 100% induk akan menempati tinggi penuh ini.

Saya harap saya benar. Apakah saya

Jika ada yang tertarik, ada plugin jquery bernama: jquery.matchHeight.js

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

matchHeight membuat tinggi semua elemen yang dipilih sama persis. Ini menangani banyak kasus tepi yang menyebabkan plugin serupa gagal.

Untuk deretan kartu, saya menggunakan:

<div class="row match-height">

Kemudian aktifkan seluruh situs:

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

jsfiddle.dll

Cukup tambahkan tinggi yang Anda inginkan dengan CSS, contoh:

.card{
    height: 350px;
}

Anda harus menambahkan CSS Anda sendiri.

Jika Anda memeriksa dokumentasinya, ini untuk gaya Masonry - intinya adalah tingginya tidak semua sama.