Grid Yayasan - perangkat kecil
Misalkan kita memiliki tata letak grid sederhana pada perangkat kecil, dua, rasio lebar 25% dan 75%.
Tip: Tentukan layar perangkat kecil kurang dari 40.0625em
.
Kami menggunakan perangkat kecil .small-*
kategori.
<div class="small-3 columns">idid</div> <div class="small-9 columns">idid</div>
Contoh berikut mendirikan dua kolom, rasio adalah 25% dan 75% (Foundation adalah ponsel pertama: Jika tidak ditentukan, peralatan besar akan mewarisi .small kode kelas): .small
. Di them Mereka dan penggunaan "
contoh
<Class Div = "row">
<Class Div = "kecil-3 kolom" style = "background-color: yellow;">
<P>? Tutorial ini </ p>
</ Div>
<Div class = "kecil-9 kolom" style = "background-color: pink;">
<P>? Tutorial ini </ p>
</ Div>
</ Div>
<Class Div = "kecil-3 kolom" style = "background-color: yellow;">
<P>? Tutorial ini </ p>
</ Div>
<Div class = "kecil-9 kolom" style = "background-color: pink;">
<P>? Tutorial ini </ p>
</ Div>
</ Div>
Coba »
Catatan: Untuk memastikan bahwa jumlah kolom menambahkan hingga 12! |
Jika Anda perlu menyiapkan 33,3% rasio / 66,6%, Anda dapat menggunakan .small-4
dan .small-8
:
contoh
<Class Div = "row">
<Class Div = "kecil-4 kolom" style = "background-color: yellow;">
<P>? Tutorial ini </ p>
</ Div>
<Div class = "kecil-8 kolom" style = "background-color: pink;">
<P>? Tutorial ini </ p>
</ Div>
</ Div>
<Class Div = "kecil-4 kolom" style = "background-color: yellow;">
<P>? Tutorial ini </ p>
</ Div>
<Div class = "kecil-8 kolom" style = "background-color: pink;">
<P>? Tutorial ini </ p>
</ Div>
</ Div>
Coba »