Espaciamiento

Bootstrap huk hatun llimp'i taquigrafía kutichiq margen, relleno, chaymanta gap yanapakuy clasekuna huk elementopa rikchayninta tikranapaq.

Kay p'anqapi

Margen y acolchado

Huk elementoman utaq huk subconjunto de sus lados kaqman clases de taquigrafía kaqwan kutichiy-amigo marginutaq chanikunata churay. paddingSapa propiedades kaqpaq, tukuy propiedades kaqpaq, chaymanta sayaq chaymanta horizontal kaqpaq yanapakuykunata churan. Clases huk ñawpaqmanta Sass mapamanta ruwasqa kanku .25remchaymanta 3rem.

CSS Grid churana módulo llamk'achispa? Yuyaykuy gap utilidad nisqawan yanapachikuyta .

Notación

Espaciamiento yanapakuykuna llapa p'akiy puntokunaman,mantamanta , xsmana xxlp'akiy abreviaturayuqchu chaykunapi. Kayqa chay clasekuna min-width: 0chaymanta wichayman churasqa kasqanrayku, chaymanta chayhina mana huk willay mast'ariq tapuywan watasqa kasqankurayku. Puchuq rakikunapim ichaqa huk pakiypa pisichasqa rimaynin kachkan.

Clases sutichasqa kanku formato {property}{sides}-{size}para xsy {property}{sides}-{breakpoint}-{size}para sm, md, lg, xl, y xxl.

Maypichus propiedad nisqaqa hukninmi:

m- para clases que establecenmargin
p- para clases que establecenpadding

Maypi ladokuna hukninmi:

t- para clases que establecen margin-topopadding-top
b- para clases que establecen margin-bottomopadding-bottom
s- (qallarinapaq) clasekuna churanapaq margin-leftutaq padding-leftLTR kaqpi, margin-rightutaq padding-rightRTL kaqpi
e- (tukuy) clasekuna churanapaq margin-rightutaq padding-rightLTR kaqpi, margin-leftutaq padding-leftRTL kaqpi
x- para clases que establecen ambos *-lefty*-right
y- para clases que establecen ambos *-topy*-bottom
ch'usaq - huk marginicha paddingelementopa lliw 4 ladonkunapi churaq clasekunapaq

Maypichus sayayninqa hukninmi:

0- para clases que eliminan el margino paddingchayta churaspa0
1- (ñawpaqmanta) chay marginutaq paddingnisqaman churaq clasekunapaq$spacer * .25
2- (ñawpaqmanta) chay marginutaq paddingnisqaman churaq clasekunapaq$spacer * .5
3- (ñawpaqmanta) chay marginutaq paddingnisqaman churaq clasekunapaq$spacer
4- (ñawpaqmanta) chay marginutaq paddingnisqaman churaq clasekunapaq$spacer * 1.5
5- (ñawpaqmanta) chay marginutaq paddingnisqaman churaq clasekunapaq$spacer * 3
auto- para clases que establecen el margina auto

$spacers(Aswan sayaykunata yapayta atinki Sass mapa tikraqman qillqakunata yapaspa ).

Ejemplos

Kaypi wakin representativo ejemplokuna kay clasekunamanta:

.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;
}

Chawpichay horizontal

Chaymanta, Bootstrap huk .mx-autoclasetapas churan horizontalmente chawpichaypaq takyasqa-ancho bloque nivel contenidota —chayqa, contenido kaqta display: blockchaymanta huk widthhuñu— horizontal margenkunata churaspa auto.

Chawpichasqa elemento

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

Margen negativo nisqa

CSS kaqpi, marginpropiedades mana allin chanikunata llamk'achiyta atin ( paddingmana atinchu). Kay mana allin margenkuna ñawpaqmanta mana llamk'achisqa kachkan , ichataq Sass kaqpi atichiyta atikunman churaspa $enable-negative-margins: true.

Sintaxis yaqa kaqlla ñawpaqmanta, allin margen yanapakuykunawan, ichaqa yapasqawan nmanaraq mañasqa sayayniyuq. Kaypi huk ejemplo clase kachkan chaymi contrario kay .mt-1:

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

Kiti

, llamk'achkaspa , tayta llika waqaychanapi yanapakuykunata display: gridllamk'achiyta atikunki . Kayqa sapa llika imakunaman (huk waqaychanapa gapwawankunaman) margen yanapakuykunata yapanaykimanta qullqita waqaychayta atin . display: gridGap yanapakuykuna ñawpaqmanta kutichiq kanku, chaymanta yanapakuyniyku API kaqnintakama ruwasqa, $spacersSass mapa kaqpi.

Artículo de rejilla 1

Artículo de rejilla 2

Artículo de rejilla 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>

Yanapakuyqa kutichiq akllanakuna llapa Bootstrap kaqpa llika p'akiyninpaq, chaymanta suqta sayayniyuq $spacersmapamanta ( 0– 5). Mana kanchu .gap-autoutilidad clase hina efectivamente kaqlla .gap-0.

Sass

Mapas

Espaciamiento yanapakuykuna Sass mapa kaqnintakama willasqa chaymanta chaymanta API yanapakuyniykuwan ruwasqa.

$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);

API de Utilidades nisqa

Espaciamiento yanapakuykuna yanapakuyniyku API kaqpi willasqa kachkanku scss/_utilities.scss. Yachay imayna ruwanakuna API llamk'achiyta.

    "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
    ),