HTML Bootstrap İç İçe Geçmiş Tasarımı Nasıl Yaparım (Grid)

08.03.2019 11:10

berkaycatak Kendi Çapında Geliştirici Kullanıcı

Üyelik 15.09.2014
Yaş/Cinsiyet 23 / E
Meslek Yazılımcı
Konum İstanbul Anadolu

Ad Soyad B** Ç**
Mesajlar 1242
Beğeniler 1278 / 406
Ticaret 9, (%100)

Merhaba, Bootstrap bir web sitesi için iç içe geçmiş bir tasarım nasıl yapabilirim? İnternette aradım ama bulamadım...

Col-md-4 kullanıyorum, oluşturduğum card tasarımını yan yana yerleştiriyorum. İçerik gereği bazı cardlar diğerinden uzun veya kısa oluyor. Hal böyle olunca aşağı satıra geçen cardlar üstteki en uzun carda göre hizalanıyor...

Yapmak istediğim tasarım:

Şimdi olan:

08.03.2019 11:15

#2

SeCe Seo National Kullanıcı

Üyelik 16.10.2015
Yaş/Cinsiyet 33 / E
Meslek Seo - WYO - Google Ceza
Konum İstanbul Avrupa

Ad Soyad S** Ç**
Mesajlar 349
Beğeniler 38 / 156
Ticaret 8, (%88)

https://getbootstrap.com/docs/4.1/layout/grid/ yardımcı olacaktır. .container .row ile gidersen işini görecektir. Hizalamalar için .row ve .col sınıflarına değerler verebilirsin.

* Ayrıca tumbnail, author, date, category ve description divleri için max height değeri verirsen uzunluk ve kısalığı engellemiş olursun.

1 kişi bu mesajı beğendi.

08.03.2019 11:23

#3

berkaycatak Kendi Çapında Geliştirici Kullanıcı

Üyelik 15.09.2014
Yaş/Cinsiyet 23 / E
Meslek Yazılımcı
Konum İstanbul Anadolu

Ad Soyad B** Ç**
Mesajlar 1242
Beğeniler 1278 / 406
Ticaret 9, (%100)

SeCe adlı üyeden alıntı

https://getbootstrap.com/docs/4.1/layout/grid/ yardımcı olacaktır. .container .row ile gidersen işini görecektir. Hizalamalar için .row ve .col sınıflarına değerler verebilirsin.

* Ayrıca tumbnail, author, date, category ve description divleri için max height değeri verirsen uzunluk ve kısalığı engellemiş olursun.

İlk görselde görüldüğü üzere zaten kullanıyorum. İstediğim şey yukarıdakş cardın uzunluğuna göre aşapıdaki card yukarı ya da aşağı konumlansın

08.03.2019 11:25

#4

wpuzman WordPress Developer Kullanıcı

Üyelik 13.01.2017
Yaş/Cinsiyet 33 / E
Meslek Yazılım
Konum Trabzon

Ad Soyad B** M**
Mesajlar 2771
Beğeniler 293 / 949
Ticaret 33, (%100)

Bootstrap masonry diye araştırırsanız bulursunuz. Veya masonry.js kullanabilirsiniz.

1 kişi bu mesajı beğendi.

Udemy Wordpress Tema Yapımı Kursum

08.03.2019 11:27

#5

cgrclk Fortis Fortuna Adiuvat Kullanıcı

Üyelik 18.11.2011
Yaş/Cinsiyet 35 / E
Meslek Web Developer
Konum İstanbul Avrupa

Ad Soyad B** Ç**
Mesajlar 3270
Beğeniler 1014 / 1983
Ticaret 53, (%100)

Bu işinizi görür sanırım.

rGEQVp

2 kişi bu mesajı beğendi.

08.03.2019 11:31

#6

SeCe Seo National Kullanıcı

Üyelik 16.10.2015
Yaş/Cinsiyet 33 / E
Meslek Seo - WYO - Google Ceza
Konum İstanbul Avrupa

Ad Soyad S** Ç**
Mesajlar 349
Beğeniler 38 / 156
Ticaret 8, (%88)

Resimde ortadaki resim diğerlerden büyük göründüğü için söylemiştim dostum.

Sorun ızgaralardaki sıra sınıflarınla alakalı.

1 kişi bu mesajı beğendi.

08.03.2019 11:59

#7

bitirimci WM Aracı Kimlik Onayı

Üyelik 20.05.2013
Yaş/Cinsiyet 41 / E
Meslek Serbest
Konum İstanbul Avrupa

Ad Soyad M** Y**
Mesajlar 1170
Beğeniler 216 / 214
Ticaret 0, (%0)

row a max yükseklik verseniz olmaz mı

1 kişi bu mesajı beğendi.

09.03.2019 00:59

#8

RecepDemirel www.demirelrecep.com Kullanıcı

Üyelik 25.03.2017
Yaş/Cinsiyet 32 / E
Meslek Front End Developer
Konum İstanbul Avrupa

Ad Soyad R** D**
Mesajlar 152
Beğeniler 49 / 45
Ticaret 1, (%100)

Hocam yapman gereken tek şey row kullanmamak. Row kullandığın zaman col'ları o row içinde sınırlandırmış oluyorsun, bu nedenle col'ların üstteki row'un alanına giremiyor.

Bu da örnek

https://getbootstrap.com/docs/4.3/components/card/#card-columns

09.03.2019 01:13

#9

nozver WM Aracı Kullanıcı

Üyelik 12.01.2019
Yaş/Cinsiyet 31 / E
Meslek Öğrenci
Konum Tekirdağ

Ad Soyad N** Ö**
Mesajlar 271
Beğeniler 36 / 81
Ticaret 0, (%0)

tam aradığım şeyin cevabı mesajım bulunsun

HTML Bootstrap İç İçe Geçmiş Tasarımı Nasıl Yaparım (Grid)

Üye Girişi Yap