ایجاد فاصله بین Column های بوت استرپی
یک صفحه دارم طراحی میکنم شامل دو ستون که به صورت زیر تعریف کردم :
<div class="col-md-8" style="height:200px; background-color:green;">
</div>
<div class="col-md-4" style="height:200px; background-color:red;">
</div>
همونطوری که در عکس زیر مشخصه هر دو div به هم چسبیده هستن. در حالی که من میخوام یه فاصله ای بین این دو div باشه. البته میتونم از margin استفاده کنم ولی در این صورت یکی از div ها میره پایین قرار میگیره.
ایجاد فاصله بین دو 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 پدر خودش فاصله ایجاد می کنه. تصویر زیر گویای تغییر هست.
|
تاریخ :
1403/02/19
- ساعت :
01:52:00 PM
- بازدید :
38
- پاسخ :
1
|
|
تاریخ :
1400/11/14
- ساعت :
12:23:00 AM
- بازدید :
2286
- پاسخ :
2
|
|
تاریخ :
1402/08/04
- ساعت :
05:01:00 PM
- بازدید :
530
- پاسخ :
1
|
|
تاریخ :
1402/08/06
- ساعت :
01:20:00 PM
- بازدید :
539
- پاسخ :
1
|
|
تاریخ :
1402/08/01
- ساعت :
06:25:00 PM
- بازدید :
642
- پاسخ :
1
|
|
تاریخ :
1402/07/25
- ساعت :
09:15:00 PM
- بازدید :
768
- پاسخ :
1
|
|
تاریخ :
1399/12/13
- ساعت :
12:10:00 AM
- بازدید :
3076
- پاسخ :
1
|
|
تاریخ :
1399/01/11
- ساعت :
02:02:00 PM
- بازدید :
2754
- پاسخ :
3
|
|
تاریخ :
1402/06/28
- ساعت :
12:47:00 PM
- بازدید :
780
- پاسخ :
1
|
|
تاریخ :
1399/06/16
- ساعت :
07:18:00 PM
- بازدید :
7077
- پاسخ :
4
|
|
تاریخ :
1403/02/24
- ساعت :
04:40:00 PM
- بازدید :
55
- پاسخ :
2
|
|
تاریخ :
1403/02/23
- ساعت :
02:24:00 PM
- بازدید :
103
- پاسخ :
5
|
|
تاریخ :
1403/02/25
- ساعت :
04:38:00 PM
- بازدید :
46
- پاسخ :
1
|
|
تاریخ :
1403/02/16
- ساعت :
01:25:00 PM
- بازدید :
138
- پاسخ :
4
|
|
تاریخ :
1403/02/20
- ساعت :
06:33:00 PM
- بازدید :
86
- پاسخ :
1
|
|
تاریخ :
1403/01/17
- ساعت :
08:30:00 PM
- بازدید :
265
- پاسخ :
3
|
|
تاریخ :
1401/11/15
- ساعت :
11:17:00 AM
- بازدید :
1210
- پاسخ :
1
|
|
تاریخ :
1402/04/01
- ساعت :
06:17:00 PM
- بازدید :
1153
- پاسخ :
0
|
|
تاریخ :
1403/02/20
- ساعت :
12:29:00 AM
- بازدید :
56
- پاسخ :
1
|
|
تاریخ :
1403/02/19
- ساعت :
11:43:00 AM
- بازدید :
71
- پاسخ :
1
|