Mengenai contoh ini untuk membuat daftar responsif <ul> dan <li> , Saya tidak mengerti prinsip baris berikut:

<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">

Yang membuat desain daftar responsif terjadi. Saya memahami setiap kelas di antara keempatnya, tetapi tidak fungsinya ketika digabungkan.

1
cloudysky 10 Agustus 2017, 19:36

2 jawaban

Jawaban Terbaik

Karena Anda menyebutkan bahwa Anda mengetahui beberapa di antaranya, saya berasumsi yang berikut (yaitu tata letak kisi bootstrap yang terdiri dari 12 kolom):

col-xs-12 => Take full width for size extra small
col-sm-10 => width 10/12 width for small
col-md-8 => width 8/12 width for medium

Yang tersisa:

col-sm-offset-1 => put a margin of 1 col width on the left for small
col-md-offset-2 => put a margin of 2 cols with on the left for medium
2
ashleyr 10 Agustus 2017, 16:49

Lebar penuh ketika ukuran layar xs, lebar 10 kolom pada ukuran kecil - ditekuk oleh 1 kolom, lebar 8 kolom pada ukuran sedang - didorong oleh 2 kolom.

Sm dan md di kelas offset memberi tahu Anda ukuran mana yang terpengaruh. Jadi .col-md-offset-2 berarti bahwa dari 12 kolom kisi di layar, col-md-8 akan memulai 2 kolom dari awal, jadi dimulai di posisi kolom ke-3. mengambil 3-12, total 8 kolom.

1
Sensoray 10 Agustus 2017, 16:42