تغییر اندازه ستون های bootsrap 4 با flex

گاهی اوقات لازم است که اندازه استاندارد 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 میشود