گزینه های ستون

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


ترازبندی عمودی #

برای ترازبندی ستونها به صورت عمودی،اصلاح کننده is-vcentered به بخش columns اضافه کنید.

ستون اول

ستون دوم با محتوای بیشتر. این بدان جهت است که می توانید ترازبندی عمودی را مشاهده کنید


<div class="columns is-vcentered">
    <div class="column is-8">
    <p class="bd-notification is-primary">First column</p>
    </div>
    <div class="column">
    <p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
    </div>
</div>

چندخطی #

هر زمان بخواهید یک خط جدید شروع کنید، شما می توانید بخش columns را ببندید و یکی جدید را شروع کنید. اما همچنین می توانید از اصلاح کننده is-multiline را اضافه کرده و المان column بیشتری را در یک ردیف اضافه کنید.

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-multiline is-mobile">
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
    <div class="column is-one-quarter">
  <code>is-one-quarter</code>
    </div>
  <div class="column is-half">
    <code>is-half</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column">
    Auto
  </div>
</div>
                        

ستون های مرکزی #

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

is-half


<div class="columns is-mobile is-centered">
  <div class="column is-half">
    <p class="bd-notification is-primary">
      <code class="html">is-half</code><br>
    </p>
  </div>
</div>
                        

با استفاده از .is-multiline یک لیست انعطاف پذیر و متمرکز ایجاد کنید (تغییر اندازه را امتحان کنید تا مرکزیت را در اندازه های مختلف نمایش مشاهده کنید)

is-narrow
ستون اول

is-narrow
ستون دوم

is-narrow
ستون سوم

is-narrow
ستون چهارم

is-narrow
ستون پنجم


<div class="columns is-mobile is-multiline is-centered">
  <div class="column is-narrow">
    <p class="bd-notification is-primary">
        <code class="html">is-narrow</code><br>
        ستون اول
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-primary">
        <code class="html">is-narrow</code><br>
        ستون دوم
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-primary">
        <code class="html">is-narrow</code><br>
        ستون سوم
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-primary">
        <code class="html">is-narrow</code><br>
        ستون چهارم
    </p>
  </div>
  <div class="column is-narrow">
    <p class="bd-notification is-primary">
        <code class="html">is-narrow</code><br>
        ستون پنجم
    </p>
  </div>
</div>