Addaan fageenyaa
Bootstrap bifa elementii tokkoo fooyyessuuf gitaalee faayidaa margina deebii gabaabaa fi padding bal'aa of keessatti qabata.
Akkaataa itti hojjetu
Deebii-michuu margin
ykn padding
gatiiwwan elementii ykn tuuta xiqqaa cinaacha isaa gita gabaabaa waliin ramadi. Deeggarsa qabeentota dhuunfaa, qabeentota hunda, fi qabeentota dhaabbataa fi qajeelaa of keessatti qabata. Gitoota kaartaa Sass durtii irraa hanga .25rem
hanga 3rem
.
Nootashinii
Faayidaaleen addaan baasuu kanneen tuqaawwan ciccituu hunda irratti raawwatiinsa qaban, irraa xs
gara xl
, gabaabduu tuqaawwan ciccituu isaan keessaa hin qaban. Sababni isaas, gitawwan sun irraa min-width: 0
fi ol hojii irra waan oolan, kanaaf gaaffii miidiyaatiin waan hin hidhamneef. Qabxiileen cabbii hafan garuu gabaabduu qabxii cabbii of keessatti qabatu.
Gitoota akkaataa , , , fi {property}{sides}-{size}
tiif xs
fi {property}{sides}-{breakpoint}-{size}
tiif fayyadamuun moggaafamu .sm
md
lg
xl
Bakka qabeenyi keessaa tokko ta’etti:
m
- dareewwan saaganiifmargin
p
- dareewwan saaganiifpadding
Bakka sides keessaa tokko ta'etti:
t
- dareewwanmargin-top
ykn saaganiifpadding-top
b
- dareewwanmargin-bottom
ykn saaganiifpadding-bottom
l
- dareewwanmargin-left
ykn saaganiifpadding-left
r
- dareewwanmargin-right
ykn saaganiifpadding-right
x
- daree lamaanuu*-left
fi*-right
y
- daree lamaanuu*-top
fi*-bottom
- duwwaa - gita a
margin
yknpadding
gama 4 hunda elementii irratti saaganiif
Bakka guddinni tokko ta'etti:
0
margin
- dareewwan yknpadding
gara saaguun dhabamsiisaniif0
1
- (akka durtiitti) gitaaleemargin
yknpadding
gara saaganiif$spacer * .25
2
- (akka durtiitti) gitaaleemargin
yknpadding
gara saaganiif$spacer * .5
3
- (akka durtiitti) gitaaleemargin
yknpadding
gara saaganiif$spacer
4
- (akka durtiitti) gitaaleemargin
yknpadding
gara saaganiif$spacer * 1.5
5
- (akka durtiitti) gitaaleemargin
yknpadding
gara saaganiif$spacer * 3
auto
- gitaaleemargin
gara autotti saaganiif
$spacers
(Galtee jijjiiramaa kaartaa Sass irratti dabaluudhaan hammangaa dabalataa dabaluu dandeessa .)
Fakkeenyaaf
Fakkeenyonni bakka bu’oota gita kanaa tokko tokko kunooti:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Giddugaleessa gochuu horizontal ta’uu
Dabalataan, Bootstrap akkasumas .mx-auto
gita qabiyyee sadarkaa uggura bal'ina dhaabbataa qajeelaa giddu galeessa gochuuf-jechuunis, qabiyyee qabuu display: block
fi width
tuuta-margaa qajeelaa gara auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margiin negaatiivii ta’e
CSS keessatti, margin
qabeentota gatiiwwan negaatiivii fayyadamuu padding
danda'u ( hin danda'amu). 1
Hanga 4.2 irraa eegalee, hammangaa lakkoofsa guutuu zeeroo hin taane hundaaf armaan olitti tarreeffame (fkn, , 2
, 3
, 4
, ) fayyadamtoota margina negaatiivii daballeerra 5
. Faayidaaleen kunniin gutters tarjaa giiridii bakka cabbii qaxxaamuranii dhuunfachuuf mijataa dha.
Gingilchaan faayidaalee margina durtii, pozaatiivii wajjin wal fakkaata jechuun ni danda'ama, garuu n
hammangaa gaafatame dura dabaluu wajjin. Kunoo gita fakkeenyaa kan faallaa .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Fakkeenyi tarjaa Bootstrap bakka cabbii giddugaleessaa ( md
) fi sanaa ol irratti dhuunfachuu kunooti. .col
Nu padding waliin guddifne .px-md-5
sana booda sana waliin .mx-md-n5
warra irratti counteract gooneerra .row
.
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>