گرید متوسط (Grid Medium)
در «گرید متوسط (Medium)» با پیشوند .col-md- کار می کنیم. «گرید (Grid)» یعنی چیدن محتوا داخل ستون ها. Medium از عرض 768 تا 991 پیکسل است. هدف ما کنترل نسبت ستون ها در این بازه است.
ترکیب Small و Medium: 25/75 ← 50/50
در Small نسبت 25/75 می خواهیم. در Medium همان دو ستون برابر شوند. پس از .col-sm-* و .col-md-* باهم استفاده می کنیم.
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 bg-primary">
<p>ستون 1</p>
</div>
<div class="col-sm-9 col-md-6 bg-dark text-white">
<p>ستون 2</p>
</div>
</div>
</div>
فقط Medium: مساوی در md و بالاتر
اینجا فقط .col-md-6 می دهیم. بنابراین از md و بالاتر 50/50 است. اما در sm و xs عمودی می شود.
<div class="row">
<div class="col-md-6">
<p>نیمه چپ</p>
</div>
<div class="col-md-6">
<p>نیمه راست</p>
</div>
</div>
ستون های برابر با Auto Layout در md
اگر عدد را حذف کنیم و .col-md بگذاریم، ستون ها برابر می شوند. در زیر 768 پیکسل، ستون ها عمودی می شوند.
<!-- دو ستون برابر در md+ -->
<div class="row">
<div class="col-md">1 of 2</div>
<div class="col-md">2 of 2</div>
</div>
<!-- چهار ستون برابر در md+ -->
<div class="row">
<div class="col-md">1 of 4</div>
<div class="col-md">2 of 4</div>
<div class="col-md">3 of 4</div>
<div class="col-md">4 of 4</div>
</div>
گام های عملی
- یک
containerیاcontainer-fluidبساز. - یک
rowاضافه کن برای هر ردیف. - ستون ها را با
.col-sm-*و.col-md-*بساز. - مجموع اعداد هر ردیف حداکثر 12 باشد.
- نمایش زیر 768px را بررسی و تست کن.
نکته: کلاس ها پله ای بالا می روند. md روی بزرگ ترها هم اثر دارد.
هشدار: ستون خیلی باریک را متن سنگین نکن. خوانایی می افتد.
لینک های مرتبط
اول گرید کوچک را مرور کن. سپس گرید متوسط را پیاده سازی کن. در ادامه به گرید بزرگ برو.
جمع بندی سریع
.col-md-*از 768px فعال می شود.- Small می تواند 25/75 باشد.
- Medium می تواند 50/50 شود.
.col-mdستون برابر می سازد.- مجموع هر ردیف حداکثر 12 بماند.