Bootstrap 4 kartları kart sütunlarında aynı yükseklikte nasıl yapılır?

Bootstrap 4 alpha 2 kullanıyorum ve kartlardan yararlanıyorum. Özellikle resmi belgelerden alınan bu örnek üzerinde çalışıyorum . Tüm kartların aynı yükseklikte olmasını nasıl sağlayabilirim?

Şimdiye kadar düşünebildiğim tek şey aşağıdaki CSS kuralını belirlemektir:

.card {
    min-height: 200px;
}

Ancak bu genel bir durumda işe yaramayacak sabit kodlanmış bir çözümdür. Benim görüşüme göre kod, dokümanlardakiyle aynı, yani:

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

Sınıfları "satıra" mı yoksa "sütuna" mı yerleştirebilirsiniz? Satırda kullanırsanız kartlarda (sınır) görünmez. 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">

Buradaki diğer cevaplardan bazıları 'kaçık' görünüyor. Neden minimum yükseklik veya daha da kötüsü sabit yükseklik kullanalım?

Bu konunun (eşit yüksekliklerin) kayan blok div'lerden uzaklaşmanın nedeninin bir parçası olduğunu düşündüm.

Bootstrap 4 (Beta 2) kullanıyorum. Bu arada durumlar değişmiş görünüyor. Aynı sorunu yaşadım ve kolay bir çözüm buldum. Bu benim kodum:

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

"Col-sm-12 col-lg-6" ile kartları duyarlı hale getirdim. "H-100 kartı" ile tüm kartları ana sütunlarının yüksekliğine ayarladım. Sistemimde bu işe yarıyor, ama ben profesyonel değilim. Yani, umarım birine yardım ettim.

En iyi çözüm, Bootstrap 4 ihtiyacınız olan her şeye sahiptir: KULLANIN .d-flexve .flex-fillsınıf. card-decksDuyarlı olmadıkları için kullanmayın . Kullandım col-sm, istediğiniz .colsınıfı kullanabilir veya col-lg-xx, genişlik sütun sayısı anlamına gelir, örn. 4 veya 3 en iyi görünüm için, yayında sütun başına 3 veya 4'ten fazla varsa

İşte canavar, eylem halinde görmek için tarayıcı penceresini XS'e indirmeye çalışın:

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

h-100% 100 yükseklik anlamına gelen sınıfı uygulayabilirsiniz .

GÜNCELLEME: In Bootstrap 4 , FlexBox şimdi varsayılan ve her card-decksatır 3 kart içerecektir. Kartlar tam yüksekliğe kadar doldurulacaktır.

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

Bootstrap 4 alpha card-columns, eşit yükseklikleri gerçekten desteklemeyen CSS3 sütunları kullanır (yalnızca Firefox'ta desteklenen sütun dolgusu hariç).

Bunun yerine Bootstrap 4 flexbox modunu etkinleştirirseniz, bunun yerine card-deckyüksekliği eşitlemek ve her 3 sütunu sarmak için ve biraz CSS kullanabilirsiniz.

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

http://codeply.com/go/YFFFWHVoRB

Sütunla Aynı Yükseklikte İlgili
Bootstrap Kartı

İşte böyle yaptım:

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>

kartları içine sar

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

veya

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

Biraz farklı bir yaklaşım izledim. KullanmakCard Deck ambalajını

Kart bloğunun yüksekliğini sınırlayan bir stil kuralı ekledim:

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

Bu, aşağıdaki sonucu verir:

Kart destesini kullanabilirsiniz, tüm kartları hizalayacaktır ... bu bootstrap 4 resmi sayfasından gelir.

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

Başka bir kullanışlı yaklaşım da Kart Izgaralarıdır :

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

Bunu başarmanın en minimal yolu (bildiğim kadarıyla) :

• Uygulamak .text-monospaceKarttaki tüm metinlere .
• Kartlardaki tüm metinleri aynı sayıda karakterle sınırlayın.

GÜNCELLEME

.text-truncateKartın başlığını ve / veya diğer metinleri ekleyin . Bu, metinleri tek bir satıra zorlar. Kartları yapmak aynı yükseklikte.

Ben bu konuda acemiyim, bu yüzden hep birlikte bir şey kaçırırsam lütfen affet.

Yukarıdakilerin çoğunu denedim. Yükseklik =% 100 olarak ayarlarsanız, kart her zaman en uzun kartın en büyük uzunluğuna genişleyecektir. Kap, hepsini aynı uzunlukta sınırlayacaktır.

Kabı görmek istedim, bu yüzden neler olduğunu görmeme yardımcı olması için arka plan rengini kullandım.

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

bu benim için iyi çalıştı:

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

CSS'mizi önyükleme genel CSS'si üzerinden zorlamak.

Bu problemle karşılaştım, çoğu insan jQuery kullanıyor ... İşte benim çözümüm buydu. "Önemseme, ben sadece bu işte acemiyim ..."

.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

Herhangi bir kart öğesi yüksekliği örneğin 400 piksel ise (içeriğine bağlı olarak), esnek hizalama için varsayılan esnek olduğu için, o zaman .card-item (satır veya kart toplama sınıfının alt öğesi) genişletilecektir. kartın yüksekliğinin ebeveynin% 100'ü olması bu tam yüksekliği kaplayacaktır.

Umarım haklıydım. Ben miyim?

İlgilenen varsa, jquery.matchHeight.js adında bir jquery eklentisi vardır.

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

matchHeight, seçilen tüm öğelerin yüksekliğini tam olarak eşit yapar. Benzer eklentilerin başarısız olmasına neden olan birçok uç durumu ele alır.

Bir sıra kart için şunu kullanıyorum:

<div class="row match-height">

Ardından site genelinde etkinleştirin:

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

jsfiddle

CSS ile istediğiniz yüksekliği eklemeniz yeterlidir, örneğin:

.card{
    height: 350px;
}

Kendi CSS'nizi eklemeniz gerekecek.

Belgeleri kontrol ederseniz, bu Masonluk tarzı içindir - bunun amacı, bunların hepsi aynı yükseklikte olmamasıdır.