Välit

Bootstrap sisältää laajan valikoiman lyhennettyjä responsiivisia marginaaleja, pehmusteita ja aukkoja elementin ulkoasun muokkaamiseksi.

Tällä sivulla

Marginaali ja täyte

Määritä responsiivisuus margintai paddingarvot elementille tai sen sivujen osajoukolle pikaluokilla. Sisältää tuen yksittäisille ominaisuuksille, kaikille ominaisuuksille sekä pysty- ja vaakasuuntaisille ominaisuuksille. Luokat on rakennettu oletusarvoisesta Sass-kartasta, joka vaihtelee välillä .25rem- 3rem.

Käytätkö CSS Grid -asettelumoduulia? Harkitse gap-apuohjelman käyttöä .

Merkintä

Kaikkiin keskeytyspisteisiin soveltuvissa välitysapuohjelmissa alkaen xs- xxl, ei ole keskeytyspistelyhennettä. Tämä johtuu siitä, että näitä luokkia sovelletaan alkaen min-width: 0ja ylöspäin, joten mediakysely ei sido niitä. Loput keskeytyspisteet sisältävät kuitenkin keskeytyspisteen lyhenteen.

Luokat on nimetty muodossa ja {property}{sides}-{size}for xsja {property}{sides}-{breakpoint}-{size}for sm, md, lg, xl, ja xxl.

Kun omaisuus on jokin seuraavista:

m- luokille, jotka asettavatmargin
p- luokille, jotka asettavatpadding

Missä puolet on yksi seuraavista:

t- luokille, jotka asettavat margin-toptaipadding-top
b- luokille, jotka asettavat margin-bottomtaipadding-bottom
s- (aloitus) luokille, jotka asetetaan LTR: ssä tai margin-leftRTL :ssäpadding-leftmargin-rightpadding-right
e- (loppu) luokille, jotka asetetaan LTR: ssä tai margin-rightRTL :ssäpadding-rightmargin-leftpadding-left
x- luokille, jotka asettavat sekä *-leftja*-right
y- luokille, jotka asettavat sekä *-topja*-bottom
tyhjä - luokille, jotka asettavat elementin a margintai paddingkaikille neljälle puolelle

Jos koko on jokin seuraavista:

0- luokille, jotka poistavat margintai paddingasettamalla sen0
1- (oletusarvoisesti) luokille, jotka asettavat margintaipadding$spacer * .25
2- (oletusarvoisesti) luokille, jotka asettavat margintaipadding$spacer * .5
3- (oletusarvoisesti) luokille, jotka asettavat margintaipadding$spacer
4- (oletusarvoisesti) luokille, jotka asettavat margintaipadding$spacer * 1.5
5- (oletusarvoisesti) luokille, jotka asettavat margintaipadding$spacer * 3
auto- luokille, jotka asettavat arvon marginauto

(Voit lisätä kokoja lisäämällä merkintöjä $spacersSass-karttamuuttujaan.)

Esimerkkejä

Tässä on joitain edustavia esimerkkejä näistä luokista:

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Vaakasuora keskitys

Lisäksi Bootstrap sisältää myös .mx-autoluokan kiinteän leveyden lohkotason sisällön vaakasuoraan keskittämiseen – eli sisällön, jolla on display: blockja widthjoukko – asettamalla vaakamarginaalit arvoon auto.

Keskitetty elementti

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

Negatiivinen marginaali

CSS:ssä marginominaisuudet voivat käyttää negatiivisia arvoja ( paddingei voi). Nämä negatiiviset marginaalit ovat oletuksena pois käytöstä , mutta ne voidaan ottaa käyttöön Sassissa asettamalla $enable-negative-margins: true.

Syntaksi on lähes sama kuin oletusarvoiset positiivisen marginaalin apuohjelmat, mutta lisättynä nennen pyydettyä kokoa. Tässä on esimerkkiluokka, joka on vastakohta .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

aukko

Kun käytät display: grid, voit hyödyntää gapylätason ruudukon säiliön apuohjelmia. Tämä voi säästää marginaaliapuohjelmien lisäämistä yksittäisiin ruudukkokohteisiin ( display: gridkontin lapsiin). Gap-apuohjelmat reagoivat oletuksena, ja ne luodaan apuohjelmien API:n kautta $spacersSass-kartan perusteella.

Ruudukkokohde 1

Ruudukkokohde 2

Ruudukkokohde 3

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Tuki sisältää responsiiviset vaihtoehdot kaikille Bootstrapin ruudukon keskeytyspisteille sekä kuusi kokoa $spacerskartasta ( 0– 5). Ei ole olemassa .gap-autohyödyllisyysluokkaa, koska se on käytännössä sama kuin .gap-0.

Sass

Kartat

Väliapuohjelmat ilmoitetaan Sass-kartan kautta ja luodaan sitten apuohjelmien API:lla.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Utilities API

Väliapuohjelmat on ilmoitettu apuohjelmien API:ssa scss/_utilities.scss. Opi käyttämään apuohjelmien sovellusliittymää.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),