گرید بزرگ (Grid Large)

در «گرید بزرگ (Large)» از کلاس های .col-lg-* استفاده می کنیم. «گرید (Grid)» یعنی چیدن ستون ها کنار هم. بازه Large از عرض 992 تا 1199 پیکسل است. هدف ما تنظیم نسبت ستون ها در این بازه است.

ترکیب sm/md/lg: 25/75 ← 50/50 ← 33/66

در Small نسبت 25/75 داریم. در Medium برابر می شود. در Large نسبت 33/66 می خواهیم. پس سه کلاس را باهم می نویسیم.

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 bg-primary">
      <p>ستون 1</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 bg-dark text-white">
      <p>ستون 2</p>
    </div>
  </div>
</div>

مشاهده در ادیتور

فقط Large: مساوی در lg و بالاتر

اگر فقط .col-lg-6 بدهیم، از 992 پیکسل به بالا 50/50 می شود. در اندازه های پایین تر، ستون ها عمودی می شوند.

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>نیمه چپ</p>
    </div>
    <div class="col-lg-6">
      <p>نیمه راست</p>
    </div>
  </div>
</div>

مشاهده در ادیتور

ستون های برابر با Auto Layout در lg

اگر عدد را حذف کنیم و .col-lg بنویسیم، همه ستون ها هم عرض می شوند. زیر 992 پیکسل، عمودی می شوند.

<!-- دو ستون برابر در lg+ -->
<div class="row">
  <div class="col-lg">1 of 2</div>
  <div class="col-lg">2 of 2</div>
</div>

<!-- چهار ستون برابر در lg+ -->
<div class="row">
  <div class="col-lg">1 of 4</div>
  <div class="col-lg">2 of 4</div>
  <div class="col-lg">3 of 4</div>
  <div class="col-lg">4 of 4</div>
</div>

مشاهده در ادیتور

گام های عملی

1. یک container یا container-fluid بساز.
2. یک row اضافه کن برای هر ردیف.
3. ستون ها را با .col-sm-*، .col-md-*، .col-lg-* بساز.
4. مجموع اعداد هر ردیف حداکثر 12 باشد.
5. نمایش زیر 992 پیکسل را تست و بازبینی کن.

نکته: کلاس ها پله ای بالا می روند. lg روی بزرگ ترها هم اثر دارد.

هشدار: ستون 3 از 12 باریک است. متن طولانی نگذار.

لینک های داخلی مفید

قبل از این بخش، گرید بزرگ را با گرید متوسط مقایسه کن. سپس به گرید خیلی بزرگ برو.

جمع بندی سریع

• .col-lg-* از 992px فعال می شود.
• ترکیب sm/md/lg نسبت ها را منعطف می کند.
• .col-lg ستون های برابر می سازد.
• زیر 992px ستون ها عمودی می شوند.
• همیشه مجموع ستون ها حداکثر 12 باشد.