راه‌حل مشکل هم اندازه نبودن ستون ها در طراحی سایت:

بدون شک درحال حاضر بهترین framework برای طراحی سایت به صورت واکنش گرا (Responsive) بوت‌استرپ  (Bootstrap) است. با این فریمورک شما میتوانید سریع تر و بسیار ساده تر سایت های واکنشگرا ایجاد کنید.

احتمالا برای شما هم این قضیه پیش آمده باشه که بخوایین تمامی ستون هایی رو که هم نوع هستند رو ارتفاعشون رو باهم برابر کنین!

در این مطلب قصد داریم روش هایی که بصورت معمول برای تراز کردن ستون ها (بصورتی که ارتفاع همه ستون ها با هم برابر باشند) استفاده میشوند را معرفی کنیم.

خب! حالا برای تست روش های ممکن من توی سایت jsfiddle.net یک نمونه اولیه از مشکلی که میخواییم رفعش کنیم رو پیاده سازی میکنم و بعد باهم روش های ممکن رو روی این ساختار تست میکنیم.

با استفاده از بوت‌استرپ یک نمونه باکس که در طراحی سایت خیلی معموله رو پیاده سازی میکنیم و بعدش با استایل و تغییر ظاهر هرکدام از division ها اونها رو از هم تفکیک میکنم تا بهتر بشه تغییرات رو احساس کرد.

نمونه اولیه از مشکلی که میخوام در این مطلب حلش کنیم!

روش اول – استفاده از جاوا اسکریپت برای رفع مشکل

خب یکی از ساده ترین روش ها استفاده از MatchHeight.js که با یک دستور ساده و بدون هیچ دردسری تمام باکس های رو که شما انتخاب میکنین رو به یک اندازه در میاره و نتیجه کارش همونجوری که در تصویر پایین می بینین، هم اندازه کردن تموم ستون هاست.

هم اندازه شدن ارتفاع در بوت‌استرپ

خب برای این روش کافیه که پلاگین MatchHieght.js  رو به صفحه اضافه کنین

بعدش با یه Selector ساده جی کوئری ( jQuery ) بخشی که میخواین رو انتخاب کنین و با دستور matchHeight(); باکس ها رو هم اندازه کنین

$(function() {

$('.box').matchHeight();

});

نمونه نهایی با این روش:

اما این روش معایبی هم داره که مهم ترینش اینه که شما باید بعد از لود شدن صفحه و ready بودن صفحه اون رو استفاده کنین (زمانی که تمام محتوا لود شده باشه )، که این امر باعث میشه در صفحاتی که حجم نسبتا بالای دارند و همچنین کاربرانی که با اینترنت معمولی سایتتون رو مشاهده میکنن تا زمان ready بودن صفحه کد jQuery اجرا نمیشه و کاربر صفحه رو نامنظم میبینه.

البته بعضی از افراد هم به دلیل اینکه میخوان SEO ( بهینه سازی سایت ) بالایی داشته باشن دوست دارن کمتر از اسکریپت و پلاگین های مختلف تو طراحی سایتشون استفاده بکنن.

روش دوم – استفاده از حالت نمایش بصورت جدولی (Table)

ساختار جدول در HTML بگونهای است که بصورت پیشفرض ارتفاع تمام ستون های قرار گرفته در یک ردیف یکی هستند و بسادگی قابل تغییر نیست. به همین علت درصورت قرار گرفت باکس ها در یک ساختار جدولی Table Base اندازه ها هماهنگ خواهند بود.

اما اگر شما در طراحی رسپانسیو از تگ <table> استفاده کنین  با مشکل مواجه میشید و قطعا شما رو از این کار پیشمان میکنه، ولی شما میتونین حالت نمایش المان های فعلی <div>ها رو در CSS به حالت table تغییر بدین!

در طرح قبلی کافیه که به div هایی که دربرگیرنده باکس ها بودن در کنار کلاس .row یک کلاس دیگه اضافه کنین:

<div class="row is-table-row">
   <div class="col-sm-4">...</div>
   <div class="col-sm-4">...</div>
   <div class="col-sm-4">...</div>
</div>

سپس استایل زیر رو برای تغییر ظاهر نمایش باکس ها مینویسیم

@media only screen and (min-width : 768px) {

.is-table-row {
   display: table;
}

.is-table-row [class*="col-"] {
   float: none;
   display: table-cell;
   vertical-align: top;
}

}

نتیجه این کار رو میتونید از نمونه زیر که تغییر دادم ببینین:

روش سوم – استفاده از Flexbox

بهترین روش برای حل مشکل بنظر میرسه که استفاده از حالت نمایش Flexbox باشه چون خیلی ساده و استاندارد شما میتونین به کمک این خصوصیت CSS3 نمایش باکس ها رو کنترل کنین. البته Flexbox در IE9 به پایین اصلا پشتیبانی نمیشه و IE10 هم باهاش مشکل داره .

خب، حالا این روش رو تست کنیم، این روش هم مثل روش قبلیه و کافیه که یک کلاس به ردیف هاتون اضافه کنین. من یه کلاس با نام is-flex به ردیف هام اضافه میکنم

<div class="row is-flex">
   <div class="col-sm-4">...</div>
   <div class="col-sm-4">...</div>
   <div class="col-sm-4">...</div>
</div>

سپس در استایل صفحه با Flex کردن حالت نمایش ردیف ها ظاهر (ارتفاع باکس) رو اصلاح میکنم.

.row.is-flex {
    display: flex;
    flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

خروجی نهایی رو میتونین تو لینک پایین مشاهده کنین: