Source

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 marginvagy 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 .25remfel 3rem.

Jelölés

Az összes töréspontra, tól xs-ig érvényes térköz segédprogramok xlnem 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 oldalak valamelyike:

t- osztályoknak, amelyek beállítják margin-topillpadding-top
b- osztályoknak, amelyek beállítják margin-bottomillpadding-bottom
l- osztályoknak, amelyek beállítják margin-leftillpadding-left
r- osztályoknak, amelyek beállítják margin-rightillpadding-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 marginvagy paddingaz 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 a marginvagy paddingbeállításával0
1- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek a marginvagy -ot állítják paddingbe$spacer * .25
2- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek a marginvagy -ot állítják paddingbe$spacer * .5
3- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek a marginvagy -ot állítják paddingbe$spacer
4- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek a marginvagy -ot állítják paddingbe$spacer * 1.5
5- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek a marginvagy -ot állítják paddingbe$spacer * 3
auto- azokhoz az osztályokhoz, amelyek az marginauto

(További méreteket adhat hozzá, ha bejegyzéseket ad hozzá a $spacersSass 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 egy .mx-autoosztályt is tartalmaz a rögzített szélességű blokkszintű tartalom vízszintes központosítására – azaz a tartalommal display: blockés egy widthkészlettel – a vízszintes margók értékre állításával auto.

Középre helyezett elem

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

Negatív margó

A CSS-ben a margintulajdonságok negatív értékeket használhatnak ( paddingnem). 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.45

A szintaxis majdnem megegyezik az alapértelmezett pozitív margó segédprogramokéval, de na 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 .colpárnázást a -val .px-md-5, majd ezt ellensúlyoztuk .mx-md-n5a szülőnél .row.

Egyedi oszloptömítés

<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>