Bootstrap "card"ları nasıl aynı boyutta yapabilirim?
Bootstrapde card_groups var ama kartlarımın birleşim olmasını istemiyorum. Genişlik olarak değilde yükseklik olarak aynı boyutta olmalarını istiyorum.
Güncelleme:
Bootstrap üzerinden card deck ile yapılabildiğini öğrendim ama istedğim gibi olmadı. Video galerisi yapıyorum ve 30+ video var, bunları responsive bir şekilde yan yana col classlarını kullanarak yapmıştım.
Ör:
<div class="row">
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="myIframe" style="display: none;" class="embed-responsive-item" src="" frameborder="0" allowfullscreen="autoplay"></iframe>
<img src="../img/videos/woodendoor.webp" class="myButton embed-responsive-item" data-iframe-id="myIframe" data-video-id="MJpEs1ENX3k" style="width: 100%; height: auto; object-fit: fill; ">
</div>
<div class="card-body">
<h5 class="card-title">Ahşap Kapı Üretimi CNC</h5>
<p class="card-text">
TÜBİTAK/TEYDEB Ahşap kapı üretimine yönelik (parametrik) CAM yazılımı ve CNC kontrolör geliştirme projesi.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="myIframe1" style="display: none;" class="embed-responsive-item" src="" frameborder="0" allowfullscreen="autoplay"></iframe>
<img src="../img/videos/nesting.webp" class="myButton embed-responsive-item" data-iframe-id="myIframe1" data-video-id="rNQGg1KPucg" style="width: 100%; height: auto; object-fit: fill; ">
</div>
<div class="card-body">
<h5 class="card-title">PureCAM - Nesting</h5>
<p class="card-text">
Gelişmiş parametrelere sahip 2D Anyshape Yerleştirme Aracı.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="myIframe2" style="display: none;" class="embed-responsive-item" src="" frameborder="0" allowfullscreen="autoplay"></iframe>
<img src="../img/videos/startpoint.webp" class="myButton embed-responsive-item" data-iframe-id="myIframe2" data-video-id="14CDfS11-ns" style="width: 100%; height: auto; object-fit: fill; ">
</div>
<div class="card-body">
<h5 class="card-title">PureCAM - Başlangıç Noktası & Öncü Giriş/Çıkış</h5>
<p class="card-text">
Başlangıç noktası ve giriş/çıkış nasıl ayarlanır.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="myIframe3" style="display: none;" class="embed-responsive-item" src="" frameborder="0" allowfullscreen="autoplay"></iframe>
<img src="../img/videos/chamfer.webp" class="myButton embed-responsive-item" data-iframe-id="myIframe3" data-video-id="ahil55I3LaA" style="width: 100%; height: auto; object-fit: fill; ">
</div>
<div class="card-body">
<h5 class="card-title">Chamfer</h5>
<p class="card-text">
Chamfer tool.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="myIframe4" style="display: none;" class="embed-responsive-item" src="" frameborder="0" allowfullscreen="autoplay"></iframe>
<img src="../img/videos/helperlines.webp" class="myButton embed-responsive-item" data-iframe-id="myIframe4" data-video-id="4Lk22NjHx9E" style="width: 100%; height: auto; object-fit: fill; ">
</div>
<div class="card-body">
<h5 class="card-title">PureCAM : Yardımcı Hatlar</h5>
<p class="card-text">
PureCAM'in yardımcı hattı aracıdır. CAD/CAM uygulamasıdır.<br>Daha fazla bilgi için lütfen iletişime geçmekten çekinmeyin.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="myIframe5" style="display: none;" class="embed-responsive-item" src="" frameborder="0" allowfullscreen="autoplay"></iframe>
<img src="../img/videos/overcut.webp" class="myButton embed-responsive-item" data-iframe-id="myIframe5" data-video-id="IrygBuuwTrE" style="width: 100%; height: auto; object-fit: fill; ">
</div>
<div class="card-body">
<h5 class="card-title">PureCAM CAD : Overcut</h5>
<p class="card-text">
Bu araç, çizim nesnelerini köşelerinde ve başlangıç ve bitiş noktalarında kırpar.
</p>
</div>
</div>
</div>
</div>
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (4)
Bootstrap kullanmadığım için bilemiyorum ama şu şekilde bir çözüm olabilir gibi görünüyor:
Sanırım şu adreste ne yapabileceğiniz anlatılmış: getbootstrap.com/docs/4.6/utilities/flex/#align-items
stackoverflow.com'da da sizinkine benzer bir soru sorulmuş: How to make Bootstrap 4 cards the same height in card-columns?
Sorununuzu çözecek class adı sanıyorum ki: d-flex align-items-stretch
Şöyle bir örnek verilmiş:
<div class="container">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
</div>
</div>