Beginilah Cara dan Skrip Menggeser Kolom (Offset) Menggunakan Foundation

Kolom dapat digeser ke kanan (offset) dan membiarkan ruang sebelah kirinya kosong. Untuk menggeser kolom juga ditentukan Per ukuran layar yaitu menggunakan menggunakan class .large-offset-x, medium-offset-x dan .small-offset-x, dimana x mewakili angka 0 sampai 11. Jika nilai offset pada salah satu ukuran layar tidak ditentukan, maka akan mengikuti aturan pada bawahnya.

Skrip 2.1.4_offset_column.html

<div class="row">

    <div class="columns small-8">

        <div class="panel"> small-8 tanpa offset </div>

    </div>

    <div class="columns small-4">

        <div class="panel"> small-4 tanpa offset </div>

    </div>

</div>

<div class="row">

    <div class=" columns small-6 medium-offset-2">

        <div class="panel"> small-6 medium-offset-2 </div>

    </div>

    <div class="columns small-4">

        <div class="panel"> small-4 </div>

    </div>

</div>

<div class="row">

    <div class="columns small-4 large-offset-3 small-offset-1">

        <div class='"panel"> small-4 large-offset-3 small-offset-1 

                </div>

    </div>

    <div class="columns small-4">

        <div class="panel"> small-4 </div>

    </div>

</div>

Share :