ایجاد فاصله بین دو div با کلاس col-md-6

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

برای ایجاد فاصله بین دو div با کلاس col-md-6، می توانید از کلاس های Bootstrap مانند g-3 برای افزودن فاصله خودکار بین ستون ها استفاده کنید. همچنین می توانید از استایل های CSS برای تعیین فاصله دلخواه بین آنها بهره ببرید.

در اینجا چند راه برای انجام این کار آورده شده است:

روش اول: استفاده از کلاس های Bootstrap

<div class="row g-3">
    <div class="col-md-6">
        1
    </div>
    <div class="col-md-6">
        2
    </div>
</div>

روش دوم: استفاده از CSS برای افزودن فاصله

.col-md-6 {
    margin-right: 15px; /* فاصله بین دو div */
}

.col-md-6:last-child {
    margin-right: 0; /* حذف فاصله برای آخرین div */
}

از یکی از این دو روش استفاده کنید تا فاصله مورد نظر را بین دو div خود ایجاد کنید.

با درود ​​​​​برای اینکه فاصله همانند تصویر زیر ایجاد گردد باید از روش زیر استفاده کنید.

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="bg-success">
                شماره 1
            </div>
        </div>
        <div class="col-md-6">
            <div class="bg-warning">
                شماره 2
            </div>
        </div>
    </div>
</div>

می تونید به صورت زیر کدهای html رو بنویسید :

<style>
    .box{
        box-sizing:border-box;
        border:3px solid transparent;
        background-clip:padding-box;
    }
</style>

<div class="row">
    <div class="col-md-6 bg-white box">
        پنل سمت راست
    </div>
    <div class="col-md-6 bg-white box">
        پنل سمت چپ
    </div>
</div>