رفع مشکل جا نشدن تمام ستون ها در یک ردیف

سلام خدمت دوستان عزیز
دیدم چندین نفر از عزیزان بعد از دیدن ویدیو این جلسه مشکلی داشتند و مشکل این بود که بعد از دادن Padding به کلاس col باعث میشد 12 ستون اونها در یک ردیف قرار نگیره و چند ستون به ردیف بعد منتقل بشه.

برای رفع این مشکل کافیه که کد زیر رو به فایل CSS خودتون اضافه کنید:

*,
*::before,
*::after {
    box-sizing: border-box;
}

با اضافه کردن کد بالا مشکلتون برطرف میشه.

اما قضیه چیه؟
خیلی از دوستان میان box-sizing را به body میدن و به همین دلیل به درستی عمل نمیکنه و مشکل ایجاد میشه. اما با کد بالا دیگه خیالتون راحته که مشکلی پیش نمیاد.

* صرفا برای دوستانی که شاید ندونن یا فراموش کرده باشن box-sizing را خلاصه این میشه که وقتی ما به المانی padding, margin, border میدیم به اندازه اصلی المانمون این مقادیر اضافه میشه و به همین دلیل باعث میشه تو خیلی از قسمت های سایت مشکل پیش بیاد و سر اندازه ها به مشکل بخوریم ولی وقتی کد بالا را مینویسم باعث میشه دیگه هیچ کدوم از 3 مقدار بالا در اندازه اصلی المان ما تغییری ایجاد نکنه.

موفق باشید.