Térköz
A Bootstrap a gyorsított reszponzív margók és padding segédprogramok széles skáláját tartalmazza az elemek megjelenésének módosításához.
Hogyan működik
Rendeljen reszponzív-barát margin
vagy padding
értékeket egy elemhez vagy oldalainak egy részhalmazához gyorsírási osztályokkal. Tartalmazza az egyes tulajdonságok, az összes tulajdonság, valamint a függőleges és vízszintes tulajdonságok támogatását. Az osztályok egy alapértelmezett Sass térképből épülnek .25rem
fel 3rem
.
Jelölés
Az összes töréspontra, tól xs
-ig érvényes térköz segédprogramok xl
nem tartalmaznak töréspont-rövidítést. Ennek az az oka, hogy ezeket az osztályokat a rendszer elölről min-width: 0
és felfelé alkalmazza, és így nem köti őket médialekérdezés. A fennmaradó töréspontok azonban tartalmaznak egy töréspont-rövidítést.
Az osztályok elnevezése a következő formátumban történik {property}{sides}-{size}
: xs
, {property}{sides}-{breakpoint}-{size}
, sm
, md
és lg
.xl
Ahol az ingatlan a következők egyike:
m
- az osztályokhoz, amelyek megmargin
p
- az osztályokhoz, amelyek megpadding
Ahol az egyik oldal van:
t
- osztályoknak, amelyek beállítjákmargin-top
illpadding-top
b
- osztályoknak, amelyek beállítjákmargin-bottom
illpadding-bottom
l
- osztályoknak, amelyek beállítjákmargin-left
illpadding-left
r
- osztályoknak, amelyek beállítjákmargin-right
illpadding-right
x
- azokhoz az osztályokhoz, amelyek beállítják a*-left
és a*-right
y
- azokhoz az osztályokhoz, amelyek beállítják a*-top
és a*-bottom
- üres - azokhoz az osztályokhoz, amelyek egy
margin
vagypadding
az elem mind a 4 oldalára állítanak be
Ahol a méret a következők egyike:
0
- azoknál az osztályoknál, amelyek megszüntetik amargin
vagypadding
beállításával0
1
- (alapértelmezés szerint) azoknál az osztályoknál, amelyek amargin
vagy -ot állítjákpadding
be$spacer * .25
2
- (alapértelmezés szerint) azoknál az osztályoknál, amelyek amargin
vagy -ot állítjákpadding
be$spacer * .5
3
- (alapértelmezés szerint) azoknál az osztályoknál, amelyek amargin
vagy -ot állítjákpadding
be$spacer
4
- (alapértelmezés szerint) azoknál az osztályoknál, amelyek amargin
vagy -ot állítjákpadding
be$spacer * 1.5
5
- (alapértelmezés szerint) azoknál az osztályoknál, amelyek amargin
vagy -ot állítjákpadding
be$spacer * 3
auto
- azokhoz az osztályokhoz, amelyek azmargin
auto
(További méreteket adhat hozzá, ha bejegyzéseket ad hozzá a $spacers
Sass térképváltozóhoz.)
Példák
Íme néhány reprezentatív példa ezekre az osztályokra:
.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;
}
Vízszintes központosítás
Ezenkívül a Bootstrap tartalmaz egy .mx-auto
osztályt is a rögzített szélességű blokkszintű tartalom vízszintes központosítására – azaz olyan tartalomra, amely rendelkezik display: block
és van width
beállítva – a vízszintes margók beállításával auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatív margó
A CSS-ben a margin
tulajdonságok negatív értékeket használhatnak ( padding
nem). A 4.2-es verziótól kezdve minden fent felsorolt nem nulla egész mérethez negatív margó segédprogramokat adtunk (pl. , 1
, 2
, 3
, ). Ezek a segédprogramok ideálisak a rácsoszlop ereszcsatornáinak testreszabásához a töréspontokon keresztül.4
5
A szintaxis majdnem megegyezik az alapértelmezett pozitív margó segédprogramokéval, de n
a kért méret előtt hozzáadva a következőt. Íme egy példaosztály, amely az ellenkezője .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Íme egy példa a Bootstrap rács testreszabására a közepes ( md
) törésponton és a felett. Növeltük a .col
párnázást a -val .px-md-5
, majd ezt ellensúlyoztuk .mx-md-n5
a szülőnél .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>