تغییر اندازه ستون های bootsrap 4 با flex
تاریخ انتشار:
16 مهر 1398
گاهی اوقات لازم است که اندازه استاندارد col-lg-3 را کمی کاهش دهیم اما ستون کناری که col-lg-9 است مقداری فضای خالی در سمت راست اضافه میشود
bootstrap 4 از سیستم flex-box استفاده میکند و ما بدون نیاز به دست کاری متغییر ها و استاندارهای آن از ۲ کلاس کمی استفاده کنیم مثلا
<style media="screen"> .col-side-right{ flex: 0 0 20% !important; max-width: 20%; } .col-side-left{ flex: 0 0 80%; max-width: 80%; } </style> <div class="row"> <div class="col-lg-3 col-side-right"> </div> <div class="col-lg-9 col-side-left"> </div> </div>
دو کلاس col-side-left و col-side-right با تغییر درصد های پیش فرض col-lg-3 از ۲۵٪ به ۲۰٪ باعث کوچکتر شدن عرض col-lg-3 میشود