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

پاسخ هوش مصنوعی

برای ایجاد فاصله بین دو ستون در بوت استرپ بدون اینکه یکی از آنها به پایین برود، می توانید از کلاس های gutter استفاده کنید که با افزودن به row ها، فضای لازم را ایجاد می کند. به عنوان مثال، می توانید به صورت زیر کد خود را تغییر دهید:

<div class="row">
    <div class="col-md-8 g-3">
        <div style="height:200px; background-color:green;"></div>
    </div>
    
    <div class="col-md-4 g-3">
        <div style="height:200px; background-color:red;"></div>
    </div>
</div>

در اینجا از کلاس g-3 استفاده شده است که فاصله ای برابر با 1.5rem (بر اساس مقیاس بوت استرپ) ایجاد می کند. می توانید بسته به نیاز خود، مقدار کلاس gutter را تغییر دهید.

ایجاد فاصله بین دو 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 پدر خودش فاصله ایجاد می کنه. تصویر زیر گویای تغییر هست.