v2.5.2
Giriş yap

Bootstrap col farklı heightlerde tasarım problemi

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

Cevap yaz
Cevaplar (4)
nubez
855 gün önce

Sağol o kadar kod almışsın bir yerden buraya kopyalamışsın ama soruyla ne alakası var ben bağlantısını kuramadım.
Konuda fiddle mevcut.

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

nubez
860 gün önce

Onu ben de denedim ama olmadı @howlberg fiddle üzerinde ekleyip yollar mısın?

howlberg
860 gün önce

Row bir flex yapısı olduğu için içindeki itemlar uzun eşitlikte olacaktır. align-items kullanırsan uzunlukar sadece kapladığı kadar olacaktır. align-items-start gibi bir classname kullanabilirsin. Bunu row verdiğin div'e vermen lazım.