اندازه ستون ها

اندازه هر ستون را به صورت جداگانه تعریف کنید

اگر می خواهید اندازه ستون را تغییر دهید ، می توانید یکی از کلاس های زیر استفاده کنید:

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-full

ستون دیگر به صورت خودکار فضای باقی مانده را پر می کند.

از 0.6.1
اکنون می توانید از ضرب های زیر 20٪ نیز استفاده کنید:

اکنون می توانید از مضرب های 20٪ زیر نیز استفاده کنید:

  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

is-full

is-four-fifths

Auto

Auto

is-three-quarters

Auto

Auto

is-two-thirds

Auto

Auto

is-three-fifths

Auto

Auto

is-half

Auto

Auto

is-two-fifths

Auto

Auto

is-one-third

Auto

Auto

is-one-quarter

Auto

Auto

is-one-fifth

Auto

Auto


<div class="columns">
    <div class="column is-four-fifths">is-four-fifths</div>
    <div class="column">Auto</div>
    <div class="column">Auto</div>
</div>

<div class="columns">
    <div class="column is-three-quarters">is-three-quarters</div>
    <div class="column">Auto</div>
    <div class="column">Auto</div>
</div>

<div class="columns">
    <div class="column is-two-thirds">is-two-thirds</div>
    <div class="column">Auto</div>
    <div class="column">Auto</div>
</div>

<div class="columns">
    <div class="column is-three-fifths">is-three-fifths</div>
    <div class="column">Auto</div>
    <div class="column">Auto</div>
</div>

<div class="columns">
    <div class="column is-half">is-half</div>
    <div class="column">Auto</div>
    <div class="column">Auto</div>
</div>

<div class="columns">
    <div class="column is-two-fifths">is-two-fifths</div>
    <div class="column">Auto</div>
    <div class="column">Auto</div>
</div>

<div class="columns">
    <div class="column is-one-third">is-one-third</div>
    <div class="column">Auto</div>
    <div class="column">Auto</div>
</div>

<div class="columns">
    <div class="column is-one-quarter">is-one-quarter</div>
    <div class="column">Auto</div>
    <div class="column">Auto</div>
</div>

<div class="columns">
    <div class="column is-one-fifth">is-one-fifth</div>
    <div class="column">Auto</div>
    <div class="column">Auto</div>
</div>
                            

سیستم 12 ستونه #

از آنجا که شبکه را می توان به 12 ستون تقسیم کرد ، کلاسهای اندازه برای هر بخش وجود دارد:

  • is-1
  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11
  • is-12

قرارداد نامگذاری

هر کلاس اصلاح کننده به به تعداد ستون هایی که از 12 ستون می خواهید نامگذاری شده است. بنابراین اگر از 12 ستون 7 ستون می خواهید ، از is-7 استفاده کنید.

is-1

1

1

1

1

1

1

1

1

1

1

1

is-2

1

1

1

1

1

1

1

1

1

1

is-3

1

1

1

1

1

1

1

1

1

is-4

1

1

1

1

1

1

1

1

is-5

1

1

1

1

1

1

1

is-6

1

1

1

1

1

1

is-7

1

1

1

1

1

is-8

1

1

1

1

is-9

1

1

1

is-10

1

1

is-11

1

is-12


Offset #

در حالیکه می توانید از ستون های خالی استفاده کنید (مانند <div class="column"></div>) برای ایجاد فضای افقی در اطراف المان column. می توانید از اصلاح کننده های offset مانند is-offset-x. استفاده کنید:

is-half
is-offset-one-quarter

is-three-fifths
is-offset-one-fifth

is-4
is-offset-8

is-11
is-offset-1


<div class="columns is-mobile">
    <div class="column is-half is-offset-one-quarter"></div>
</div>

<div class="columns is-mobile">
    <div class="column is-three-fifths is-offset-one-fifth"></div>
</div>

<div class="columns is-mobile">
    <div class="column is-4 is-offset-8"></div>
</div>

<div class="columns is-mobile">
    <div class="column is-11 is-offset-1"></div>
</div>
                            

ستون محدود #

اگر می خواهید ستونی تنها فضای مورد نیاز را بگیرد، از اصلاح کننده is-narrow استفاده کنید. ستون(ها)ی دیگر فضای باقیمانده را پر خواهند کرد.

ستون محدود

عرض این ستون فقط 200px است.

ستون انعطاف پذیر

این ستون فضای باقیمانده موجود را اشغال خواهد کرد.


<div class="columns">
  <div class="column is-narrow">
  <div class="box" style="width: 200px;">
  <p class="title is-5">ستون محدود</p>
  <p class="subtitle">This column is only 200px wide.</p>
  </div>
  </div>
  <div class="column">
  <div class="box">
  <p class="title is-5">ستون انعطاف پذیر</p>
  <p class="subtitle">This column will take up the remaining space available.</p>
  </div>
  </div>
</div>

در مورد اصلاح کننده های اندازه ، می توانید ستون های محدود برای نقاط شکست مختلف داشته باشید:

  • .is-narrow-mobile
  • .is-narrow-tablet
  • .is-narrow-touch
  • .is-narrow-desktop
  • .is-narrow-widescreen
  • .is-narrow-fullhd