russianrapper
Hectopat
- Katılım
- 9 Nisan 2017
- Mesajlar
- 83
Daha fazla
- Cinsiyet
- Erkek
İyi forumlar. Projemde Bootstrap kütüphanesini kullanıyorum. Elimde 4 adet card var, bunları mobil çözünürlüğünde yan yana iki adet gelecek şekilde col-xs-6 ve col-sm-6 şeklinde ayarlıyorum fakat mobil çözünürlüğe geçtiğimde ekranda bir adet card oluyor. Bunu nasıl düzeltebilirim? Yardımcı olacak arkadaşlara şimdiden teşekkürler. Yazım yanlışı yapıldıysa affola.
Kodlardan bir kesit:
Düzenleme: Çözüm basit; col-xs-6 yerine col-6 yaptım. Çalışıyor.
Kodlardan bir kesit:
HTML:
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="card" id="program-2">
<div class="card-body">
<h4 class="card-title">Program 2</h4>
<ul>
<li>Grup ile yapılan derslerdir.</li>
<li>Yaş ya da cinsiyet farketmez.</li>
<li>Haftada 3, ayda toplam 12 ders işlenir.</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<h5>Salı</h5>
<ul>
<li>18:00-19:45</li>
<li>20:00-21:15</li>
</ul>
</li>
<li class="list-group-item">
<h5>Perşembe</h5>
<ul>
<li>18:00-19:45</li>
<li>20:00-21:15</li>
</ul>
</li>
<li class="list-group-item">
<h5>Cumartesi</h5>
<ul>
<li>11:00-12:15</li>
</ul>
</li>
</ul>
<div class="price">
<span class="price-price">300</span>
<span class="price-tl-sign">₺</span>
</div>
<div class="application text-center card-body">
<a href="#" class="btn btn-primary" id="program2-basvur">Başvur</a>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="card" id="ozel-ders">
<div class="card-body">
<h4 class="card-title">Özel Ders</h4>
<ul>
<li>Grup ile yapılan derslerdir.</li>
<li>Yaş ya da cinsiyet farketmez.</li>
<li>Haftada 3, ayda toplam 12 ders işlenir.</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<h5>Pazartesi</h5>
<ul>
<li>18:00-19:45</li>
<li>20:00-21:15</li>
</ul>
</li>
<li class="list-group-item">
<h5>Çarşamba</h5>
<ul>
<li>18:00-19:45</li>
<li>20:00-21:15</li>
</ul>
</li>
<li class="list-group-item">
<h5>Cumartesi</h5>
<ul>
<li>11:00-12:15</li>
</ul>
</li>
</ul>
<div>
<div class="price ">
<span class="price-price">300</span>
<span class="price-tl-sign">₺</span>
</div>
<div class="application card-body">
<a href="#" class="btn btn-primary" id="ozelders-basvur">Başvur</a>
</div>
</div>
</div>
</div>Düzenleme: Çözüm basit; col-xs-6 yerine col-6 yaptım. Çalışıyor.
Son düzenleme: