Bootstrap col farklı heightlerde tasarım problemi
https://jsfiddle.net/26fh3pyv/30/
Fiddle örneğinde yaptığım gibi içeriği farklı col-4 lerim var row içerisinde.
Bir tanesinin içeriği çok uzun olduğu zaman diğerleri esnediği için araları çok boş duruyor.
Birden fazla row eklemeden birbirlerine bitişik halde göstermem mümkün mü?
HTML
<div class="row">
<div class="col-lg-4">
<div class="card bg-pattern">
<div class="card-body">
<div class="text-center">
<img src="amazon.png" alt="logo" class="avatar-xl rounded-circle mb-3">
<h4 class="mb-1 font-20">Amazon Inc.</h4>
<p class="text-muted font-14">Seattle, Washington</p>
</div>
<p class="font-14 text-center text-muted">
Amazon.com, Inc., doing business as Amazon, is an American electronic commerce and cloud computing company based in Seattle..
</p>
<div class="text-center">
<a href="nojavascript...void(0);" class="btn btn-sm btn-light">View more info</a>
</div>
<div class="row mt-4 text-center">
<div class="col-6">
<h5 class="fw-normal text-muted">Revenue (USD)</h5>
<h4>17,786 cr</h4>
</div>
<div class="col-6">
<h5 class="fw-normal text-muted">Number of employees</h5>
<h4>566k</h4>
</div>
</div>
</div>
</div>
</div>
</div>
style css
.row {
--bs-gutter-x: 24px;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5);
}
.card-body {
flex: 1 1 auto;
padding: 1.5rem 1.5rem;
}
.col-lg-4 {
flex: 0 0 auto;
width: 33.33333%;
}
.bg-pattern {
background-size: cover;
}
.text-center {
text-align: center!important;
}
.mt-4 {
margin-top: 2.25rem!important;
}
BS-5 Destekler kendine göre düzenle
ayrıca sağ ve solundaki boşlukları kaldırmak için
örnek class'col-lg-4 p-0' değerini ataya bilirsin yine
col yükseklik genişlik değeri için
Yükseklik h
Genişlik W
örnek
classcol-lg-4 h-25 şeklinde kullanabilirsin
yine css içinde col flex değerini ataya bilirsin
col lg 4 flex: 0 0 auto veya flex: 0 0 0