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


134

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>

Ada upaya sejauh ini? Ada kode untuk dibagikan?
baao

2
Contoh itu untuk kolom mirip Masonry. Inti dari gaya itu adalah bahwa kartu memiliki ketinggian yang berbeda . Gunakan dek dan aktifkan mode flexbox jika Anda menginginkan ketinggian yang sama.
Quentin

1
Dek hanya berfungsi untuk kartu berturut-turut. Yang saya inginkan adalah efek yang sama card-columnstetapi menjaga ketinggian yang sama.
blueSurfer

Jawaban:


163

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?


3
h-100 bukanlah ketinggian tetap, tingginya pada 100% (dari baris)
konyak

ini harus menjadi jawaban
ACed

Ini adalah jawaban sebenarnya
Andrew Bullock

@konyak ya, saya menyadari bahwa sobat. Saya tidak mengacu pada h-100 (gulir ke bawah halaman ini).
Kerry7777

139

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.


16
sangat sederhana h-100
PNC

9
.h-100 - brilian
JCraine

2
Ini melakukan trik bagi saya ketika d-flexmenyebabkan masalah dengan IE (yang harus saya dukung). Saya baru saja menambahkan mb-4div induk untuk memisahkan kartu sedikit lagi.
Charles Paske

dan Anda juga dapat menggunakan .pre-scrollable untuk membuatnya menggulir secara vertikal
Muhammad Waqas Aziz

Saya akan menambahkan kelas .py-2 ke semua div dengan kelas .col- * untuk menambahkan padding di antara baris.
konyak

93

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>


1
Jawaban ini bagus sekali! Jika Anda tidak dapat menggunakan 'card-column' atau 'card-deck' untuk mendapatkan perilaku responsif yang diinginkan di semua area pandang.
Getsomepeaches

Ini berhasil untuk saya. Saya memiliki kolom dengan satu kartu besar, dan di kanan memiliki kolom lain dengan dua baris. jadi, kartu kiri mengambil ketinggian dari dua baris yang berdekatan, terima kasih!
Erich García

Ini adalah cara untuk pergi. Saya mencoba card-columns tetapi tidak dapat mengambil lebih dari 3 kolom per baris. Terima kasih atas jawaban ini
Yeku Wilfred Chetat

dek kartu tidak berfungsi dalam kasus saya, jawaban Anda berhasil!
TBG

31

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


12

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


Saya telah bercabang kode Anda untuk menguji sesuatu; Saya memerlukan judul yang direntangkan agar memiliki tinggi yang sama, yang tidak terjadi di sini: codeply.com/go/fqnQZ2ZGJy - tahu cara apa pun agar "Judul yang lebih pendek" saya memiliki ketinggian yang sama judul yang lebih panjang? Saya sudah mencoba bermain dengan flexbox dan grid tetapi sepertinya tidak bisa melakukannya dengan benar.
davewoodhall

11

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>

4

bungkus kartu di dalamnya

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

atau

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


3

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: masukkan deskripsi gambar di sini


3

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>

2

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>


1

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 pikir Anda salah dengan jawaban ini. Setiap kartu atau bagian dari halaman web yang berfungsi jelas akan memiliki jumlah teks (karakter) yang berbeda dan menggunakan font / tipografi yang bukan monospace. Mengapa Anda ingin memotong konten teks yang (tidak dapat) dibaca pengunjung?
Kerry7777

@ Kerry7777, Anda mungkin ingin memotong string panjang dan menambahkan "..." di akhir string agar pengguna tahu bahwa string telah dipotong. Agar mereka dapat membaca seluruh string, mereka harus mengklik atau mengarahkannya. Dengan begitu, kita bisa membuat konsistensi konten yang ditampilkan. Karena isinya tidak sama. Ada yang pendek, ada yang panjang, dan ruang layar kami terbatas.
doncadavona

1
Dalam beberapa kasus, hanya panjang teks yang membuat tinggi kartu tidak sama. Jadi jawaban ini bermanfaat.
Mohammed Shareef C

1

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>

0

ini bekerja dengan baik untuk saya:

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

memaksa CSS kita di atas bootstraps CSS umum.


0

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


-3

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

-12

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.


Tampaknya konten di kartu tidak sejajar dengan benar. Solusi ini terlalu manual. Saya ingin tahu apakah ada sesuatu yang lebih "pintar"
blueSurfer

Anda dapat mencoba sesuatu dengan jQuery, untuk membuat ketinggian secara dinamis. Tergantung apa yang ingin Anda lakukan dengan mereka.
PlatinumJay

Hanya sangat penasaran untuk mengetahui mengapa ada begitu banyak yang memilih jawabannya? cuz tampaknya berhasil
Kick Buttowski

2
Bukankah ini berarti kartu tetap memiliki tinggi yang tetap, bukan ketinggian yang sama responsif?
Robert Andrews
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.