Source

Addaan fageenyaa

Bootstrap bifa elementii tokkoo fooyyessuuf gitaalee faayidaa margina deebii gabaabaa fi padding bal'aa of keessatti qabata.

Akkaataa itti hojjetu

Deebii-michuu marginykn paddinggatiiwwan 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 .25remhanga 3rem.

Nootashinii

Faayidaaleen addaan baasuu kanneen tuqaawwan ciccituu hunda irratti raawwatiinsa qaban, irraa xsgara xl, gabaabduu tuqaawwan ciccituu isaan keessaa hin qaban. Sababni isaas, gitawwan sun irraa min-width: 0fi 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 xsfi {property}{sides}-{breakpoint}-{size}tiif fayyadamuun moggaafamu .smmdlgxl

Bakka qabeenyi keessaa tokko ta’etti:

m- dareewwan saaganiifmargin
p- dareewwan saaganiifpadding

Bakka sides keessaa tokko ta'etti:

t- dareewwan margin-topykn saaganiifpadding-top
b- dareewwan margin-bottomykn saaganiifpadding-bottom
l- dareewwan margin-leftykn saaganiifpadding-left
r- dareewwan margin-rightykn saaganiifpadding-right
x- daree lamaanuu *-leftfi*-right
y- daree lamaanuu *-topfi*-bottom
duwwaa - gita a marginykn paddinggama 4 hunda elementii irratti saaganiif

Bakka guddinni tokko ta'etti:

0margin- dareewwan ykn paddinggara saaguun dhabamsiisaniif0
1- (akka durtiitti) gitaalee marginykn paddinggara saaganiif$spacer * .25
2- (akka durtiitti) gitaalee marginykn paddinggara saaganiif$spacer * .5
3- (akka durtiitti) gitaalee marginykn paddinggara saaganiif$spacer
4- (akka durtiitti) gitaalee marginykn paddinggara saaganiif$spacer * 1.5
5- (akka durtiitti) gitaalee marginykn paddinggara saaganiif$spacer * 3
auto- gitaalee margingara 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-autogita qabiyyee sadarkaa uggura bal'ina dhaabbataa qajeelaa giddu galeessa gochuuf-jechuunis, qabiyyee qabuu display: blockfi widthtuuta-margaa qajeelaa gara auto.

Elementii giddugaleessa qabu

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Margiin negaatiivii ta’e

CSS keessatti, marginqabeentota gatiiwwan negaatiivii fayyadamuu paddingdanda'u ( hin danda'amu). 1Hanga 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 nhammangaa 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. .colNu padding waliin guddifne sana booda warra irratti .px-md-5sana waliin counteract gooneerra ..mx-md-n5.row

Padding tarjaa amala

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>