v2.5.2
Giriş yap

Bootstrap col farklı heightlerde tasarım problemi

nubez
431 defa görüntülendi

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

codepacks
857 gün önce

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