فاصله ستون ها

فاصله ستون ها را سفارشی کنید


فاصله پیش فرض #

هر ستون دارای یک فاصله برابر با مقدار $column-gap است، که دارای مقدار پیش فرض 0.75rem می باشد.
از آنجایی که فاصله در هر دو طرف ستون است، فاصله بین دو ستون مجاور دو برابر مقدار $column-gap، یا 1.5rem به طور پیش فرض خواهد بود.

فاصله پبش فرض

فاصله پبش فرض

فاصله پبش فرض

فاصله پبش فرض


بدون فاصله #

اگر می خواهید فضای ستون ها را حذف کنید، کلاس is-gapless را در بخش columns اضافه کنید:

ستون اول

ستون دوم

ستون سوم

ستون چهارم


<div class="columns is-gapless">
    <div class="column">
    No gap
    </div>
    <div class="column">
    No gap
    </div>
    <div class="column">
    No gap
    </div>
    <div class="column">
    No gap
    </div>
</div>
                            

می توانید آن را با کلاس is-multiline ترکیب کنید:

is-one-quarter

is-one-quarter

is-one-quarter

is-one-quarter

is-half

is-one-quarter

is-one-quarter

is-one-quarter

Auto


<div class="columns is-gapless is-multiline is-mobile">
    <div class="column is-one-quarter">
    is-one-quarter
    </div>
    <div class="column is-one-quarter">
    is-one-quarter
    </div>
    <div class="column is-one-quarter">
    is-one-quarter
    </div>
    <div class="column is-one-quarter">
    is-one-quarter
    </div>
    <div class="column is-half">
    is-half
    </div>
    <div class="column is-one-quarter">
    is-one-quarter
    </div>
    <div class="column is-one-quarter">
    is-one-quarter
    </div>
    <div class="column is-one-quarter">
    is-one-quarter
    </div>
    <div class="column">
    Auto
    </div>
</div>
                            

فاصله متغیر #

Experimental

با افزودن یکی از 9 اصلاح کننده در بخش .columnns می توانید فاصله سفارشی ستون را تعیین کنید.

  • is-0 هر فاصله ای را حذف می کند (شبیه is-gapless)
  • is-3 is the مقدار پیش فرض، معادل مقدار 0.75rem است
  • is-8 حداکثر فاصله 2rem است

علاوه بر این، .is-variable باید به بخش .columns اضافه شود.

Side
Main
Three columns
Three columns
Three columns
1
2
3
4
5
6
7
8
9
10
11
12

این ویژگی فقط در مرورگرهایی وجود دارد که ا CSS متغیرهای پشتیبانی می کنند.

اگر تنظیمات Sass شما از متغیرهای CSS پشتیبانی نمی کند ، می توانید با تنظیم $variable-columns به false این ویژگی را غیرفعال کنید.


فاصله ستون ها مبتنی بر نقاط شکست #

از 0.7.2

می توانید برای هر سایز نمایش یک فاصله ستون تعریف کنید:

به عنوان مثال ، در اینجا نحوه اصلاح آن با اصلاح کننده های زیر نشان داده شده است : is-variable is-2-mobile is-0-tablet is-3-desktop is-8-wide-1-fullhdhd

<div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
  <div class="column">
  ستون
  </div>
  <div class="column">
  ستون
  </div>
  <div class="column">
  ستون
  </div>
  <div class="column">
  ستون
  </div>
  <div class="column">
  ستون
  </div>
  <div class="column">
  ستون
  </div>
</div>

ستون

ستون

ستون

ستون

ستون

ستون

اگر می خواهید تفاوت را ببینید, اندازه مرورگر خود را تغییر دهید و ببینید که چگونه فاصله ستون ها تغییر می کند.