Responsiof di materialdesign seperti boostrap.

Malam gan , gmna cara nya yang waktu ane pake class col di material design. kalo ane buat col s3 berarti ada 4 konten yang bisa masuk satu baris. saat browser di kecilin kontenya tetep ada 4 dan jadi berantakan. gimana caranya biar jumlah kontenya otomatis berkurang kaya waktu pake boostrap. biar ga berantakan .

thanks . maaf kalo ga jelas :D

avatar Saputroandhi
@Saputroandhi

509 Kontribusi 162 Poin

Diperbarui 7 tahun yang lalu

5 Jawaban:

pakai framework apa? material soalnya banyak

avatar ardyhim
@ardyhim

289 Kontribusi 175 Poin

Dipost 7 tahun yang lalu

@ardyhim : ane setuju... mungkin maksudnya materialize.css ??

itu namanya konsep gridsystem, kalo di bootsrap & materialize.css itu 1 ROW nya 12 COLUMN... klo di framework css yg lain itu ada yg nyampe 24 column 1 barisnya.

klo di bootstrap ada grid classes, contohnya : xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops)

jadi kalo buat kolom

, artinya di desktop ukurannya full 12 kolom tapi kalo di tablet dia bakal dibagi jadi 6 kolom begitu juga ukuran lainnya..

setau saya, untuk yg material jg sama gk jauh berbeda kan ada small, medium, large.

referensi : http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp http://materializecss.com/grid.html

avatar yusupsaepudin
@yusupsaepudin

95 Kontribusi 107 Poin

Dipost 7 tahun yang lalu

yes materialize.css . nanti ane coba baca baca lagi gan buat dokumentasinya

avatar Saputroandhi
@Saputroandhi

509 Kontribusi 162 Poin

Dipost 7 tahun yang lalu

Jawaban Terpilih

pakai s=mobile m=tablet l=desktop

<div>
<div class="s12 m5 l4">Mobile jadi 1 grid tablet jadi 2 grid dekstop jadi 4 grid</div>
<div class="s12 m5 l4">Mobile jadi 1 grid tablet jadi 2 grid dekstop jadi 4 grid</div>
<div class="s12 m5 l4">Mobile jadi 1 grid tablet jadi 2 grid dekstop jadi 4 grid</div>
<div class="s12 m5 l4">Mobile jadi 1 grid tablet jadi 2 grid dekstop jadi 4 grid</div>
</div>

mungkin begitu. soalnya saya belum coba :D

avatar ardyhim
@ardyhim

289 Kontribusi 175 Poin

Dipost 7 tahun yang lalu

Thanks semua , segera di coba . nanti di update di sini :D

avatar Saputroandhi
@Saputroandhi

509 Kontribusi 162 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban