Bootstrap 4 Grid Medium

Contoh Kotak Sedang

Pada bab sebelumnya, kami menyajikan contoh grid dengan kelas untuk perangkat kecil. Kami menggunakan dua div (kolom) dan kami memberi mereka pembagian 25%/75%:

Tetapi pada perangkat menengah, desainnya mungkin lebih baik sebagai pembagian 50%/50%.

Untuk perangkat menengah kami akan menggunakan .col-md-*kelas:

Sekarang Bootstrap akan mengatakan "pada ukuran kecil, lihat kelas dengan -sm- di dalamnya dan gunakan itu. Pada ukuran sedang, lihat kelas dengan -md- di dalamnya dan gunakan itu".

Contoh berikut akan menghasilkan pembagian 25%/75% pada perangkat kecil dan pembagian 50%/50% pada perangkat sedang (dan besar dan xlarge). Pada perangkat ekstra kecil, itu akan secara otomatis menumpuk (100%):

Hanya Menggunakan Media

Pada contoh di bawah ini, kami hanya menentukan .col-md-6kelas (tanpa .col-sm-*). Ini berarti perangkat berukuran sedang, besar, dan ekstra besar akan terbagi 50%/50% - karena kelasnya meningkat. Namun, untuk perangkat kecil dan ekstra kecil, itu akan menumpuk secara vertikal (lebar 100%):

Kolom Tata Letak Otomatis

Di Bootstrap 4, ada cara mudah untuk membuat kolom dengan lebar yang sama untuk semua perangkat: cukup hapus nomor dari .col-md-*dan hanya gunakan .col-mdkelas pada sejumlah elemen col yang ditentukan . Bootstrap akan mengenali berapa banyak kolom yang ada, dan setiap kolom akan mendapatkan lebar yang sama.

Jika ukuran layar kurang dari 768px , kolom akan ditumpuk secara horizontal:

Bab berikutnya menunjukkan cara menambahkan persentase split yang berbeda untuk perangkat besar.