ایجاد فاصله بین Column های بوت استرپی

ایجاد فاصله بین دو col در بوت استرپ

وقتی از column ها در بوت استرپ استفاده می کنید عرض صفحه به 12 ستون یا column تقسیم بندی میشه. وقتی شما دو div دارید که یکی کلاس col-md-8 و دیگری کلاس col-md-4 دارن پس طبیعتا تمام عرض صفحه رو پوشوندید و نمیشه بین 2 div فاصله ایجاد کرد.

اما راه حل چیست ؟ وقتی از کلاسهای col در بوت استرپ برای Grid بندی استفاده می کنید به طور پیش فرض این کلاس ها دارای مقداری margin و padding هستند. بنابراین می تونید دستورتون به صورت زیر تغییر بدید :

<div class="col-md-8">
    <div class="col-md-12" style="height:200px; background-color:green;">

    </div>
</div>

<div class="col-md-4">
    <div class="col-md-12" style="height:200px; background-color:red;">

    </div>
</div>

همونطوری که ملاحظه می کنید درون هر div یک div دیگه با col-md-12 ایجاد کردیم که بخاطر margin و padding پیش فرض کمی با div پدر خودش فاصله ایجاد می کنه. تصویر زیر گویای تغییر هست.