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

یک روش ساده برای ایجاد ستون های ریسپانسیو

می توانید ستون ها را nest کنید تا انعطاف پذیری بیشتری در طراحی خود داشته باشید. فقط باید این ساختار را دنبال کنید:

  • columns: بخش ستون های سطح بالا
    • column
      • columns: ستون های تو در تو
        • column و غیره…

تفاوت با ستون های چند خطی در ترتیب کد Html است: همه ستون های آبی قبل از قرمز ها ظاهر می شوند. برای مشاهده نتیجه ، به یک نمای کوچک تر تغییر اندازه دهید.

ستون اول

ستون داخلی اول

ستون داخلی دوم

ستون دوم

50%

خودکار

خودکار

ستون های چند خطی همچنین بین هر خط فاصله دارند.


<div class="columns">
  <div class="column">
    <p class="bd-notification is-info">ستون اول</p>
    <div class="columns is-mobile">
    <div class="column">
        <p class="bd-notification is-info">ستون داخلی اول</p>
    </div>
    <div class="column">
        <p class="bd-notification is-info">ستون داخلی دوم</p>
    </div>
    </div>
  </div>
  <div class="column">
    <p class="bd-notification is-danger">ستون دوم</p>
    <div class="columns is-mobile">
    <div class="column is-half">
        <p class="bd-notification is-danger">50%</p>
    </div>
    <div class="column">
        <p class="bd-notification is-danger">خودکار</p>
    </div>
    <div class="column">
        <p class="bd-notification is-danger">خودکار</p>
    </div>
    </div>
  </div>
</div>