ریسپانسیو بودن ستون ها

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


ستون های موبایل #

به طور پیش فرض، ستون ها تنها از tablet به بعد فعال می شوند. این به این معنی است که ستون ها در mobile روی هم قرار می گیرند.
اگر می خواهید ستون ها در mobile نیز کار کند، کافیست کلاس is-mobile را به بخش columns اضافه کنید:

1

2

3

4


<div class="columns is-mobile">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>
                        

تغییر اندازه

اگر می خواهید تفاوت را مشاهده کنید, اندازه مرورگر خود را تغییر دهیدو زمانی که ستون ها روی هم قرار گرفته و زمان توزیع افقی آنها را ببینید

اگر می خواهید ستون ها فقط از desktop به بعد به صورت افقی باشند، کافیست کلاس is-desktop را به بخش columns اضافه کنید:

1

2

3

4


<div class="columns is-desktop">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>
                        

اندازه ستون های مختلف در هر نقطه شکست #

می توانید برای هر اندازه سایز نمایش اندازه ستون را تعیین کنید: mobile، tablet و desktop.

is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
is-one-third-widescreen
is-one-quarter-fullhd

2

3

4

5

Resize

اگر می خواهید این کلاسها را بصورت عملی مشاهده کنید، مرورگر خود را تغییر اندازه دهید و ببینید که عرض همان ستون در هر نقطه شکست چگونه تغییر می کند.


<div class="columns is-mobile">
    <div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
    <code>is-three-quarters-mobile</code><br>
    <code>is-two-thirds-tablet</code><br>
    <code>is-half-desktop</code><br>
    <code>is-one-third-widescreen</code><br>
    <code>is-one-quarter-fullhd</code>
    </div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <div class="column">5</div>
</div>