v2.5.2
Giriş yap

Bootstrap "card"ları nasıl aynı boyutta yapabilirim?

bukr3j
1,451 defa görüntülendi ve 1 kişi tarafından değerlendirildi
1 4

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>
HTML
css html
Cevap yaz
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Cevaplar (4)
ebykdrms
1096 gün önce

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>
HTML
1
#009654
bukr3j
1095 gün önce

Genişliğinide hallettim hiçbir sıkıntı kalmadı. o7

0
#009659
bukr3j
1096 gün önce

Hemen "Doğru Cevap" butonuna bastımda sorun çözülmedi. Yazık kafama. 2 saatlik uykuyla anca bu kadar.

0
#009657
bukr3j
1096 gün önce

Yardımın için teşekkürler, istediğim bende oluyor mu diye bakamadım ama Stackoverflow üzerinden atılan codepen.io linkine baktım oluyordu ama bende resimlerden dolayı sıkıntı yaşanıyor. @ebykdrms

0
#009655