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>