Bootstrap 5 Mobilde İkili Kutu Nasıl Yapılır?

yone1108

yone1108

Decapat
Katılım
21 Nisan 2021
Mesajlar
709
Makaleler
1
Çözümler
2
Merhaba, web sitesi tasarlıyorum ancak şöyle bir sorunum var.
Bilgisayarda col-md-3 ile bu şekilde 4 adet yan yana listeledim burada sorun yok ancak mobile geçtiğimde alt alta listeliyor. Benim istediğim mobilde yan yana 2 kutu olsun aşağıdaki kutu kırmızı ile işaretlediğim alanda olsun istiyorum ancak tek tek alt alta listeleniyor.

1674402280114.png


Bilgisayarda 4 adet kutu böyle sıralanıyor sorun yok.
1674402206621.png
 
HTML: 
<div class="col-md-12">
    <div class="row">
        <div class="col-md-3 my-2">
            <div class="card" style="width: 16rem;">
                <img src="tema/dron.jpg" class="card-img-top p-5" alt="...">
                <div class="card-body">
                    <p class="card-text">Cx007 Zoom Pro Smart Drone 2 Bataryalı CRB-044</p>
                    <h6>749₺</h6>
                </div>
                <div class="card-footer border-0">
                    <div class="text-center">
                        <button class="btn btn-sm btn-light border-1 fw-bold px-5"><i class="fa-solid fa-cart-shopping"></i> SATIN AL</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

bu şekilde kod satırım
 
meakJK dedi:
Kod: 
<div class="col-md-3 my-2">
kısmını şu şekil yap
Kod: 
<div class="col-6 col-md-3 my-2">
Genişletmek için tıkla...

Çok teşekkür ederim oldu ancak şöyle bir sorun daha var boyutlar aynı kalıyor mobilde küçülsün istiyorum bunu nasıl sağlayabilirim?

1674403347541.png


üst üste bindi bu şekilde
 
yone1108 dedi:
Çok teşekkür ederim oldu ancak şöyle bir sorun daha var boyutlar aynı kalıyor mobilde küçülsün istiyorum bunu nasıl sağlayabilirim?

Eki Görüntüle 1641382

üst üste bindi bu şekilde
Genişletmek için tıkla...
"col-6" yerine "col-5" yapıp dener misin birde, eğer olmazsa css üzerinden mobile özel boyutlandırma yapabilirsin.
 

Benzer konular

mcyılmaz
Bootstrap ile nasıl pratik yapılır?
Mesaj
1
Görüntüleme
266
zValiant
zValiant
Alifg
Bootstrap 5 JS çalışmıyor
Mesaj
7
Görüntüleme
1.329
delikarga
delikarga
Y
Bootstrap, 5 carousel küçültme sorunu
Mesaj
6
Görüntüleme
2.088
keremgencer
K
pixstudio
Çözüldü  Bootstrap Arası Boşluk Nasıl Koyulur?
Mesaj
0
Görüntüleme
8.736
pixstudio
pixstudio
R
Bootstrap telif hakkı nasıl işler?
Mesaj
0
Görüntüleme
286
Randoming321
R

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı