Espaciado rehegua

Bootstrap oguereko hetaiterei clase utilidad margen ombohováiva taquigrafía ha relleno omoambue hag̃ua peteĩ elemento jehechauka.

Mba’éichapa omba’apo

Oñeasigna respuesta-friendly margintérã paddingvalores peteĩ elemento térã peteĩ subconjunto ijykére orekóva clase taquigrafía. Oike ipype pytyvõ umi mbaꞌekuaarã peteĩteĩva rehegua, opaite mbaꞌekuaarã ha mbaꞌekuaarã vertical ha horizontal rehegua. Umi mbo’esyry oñemopu’ã peteĩ mapa Sass por defecto guive ohóva .25remguive 3rem.

Notación rehegua

Umi utilidad espaciado rehegua ojeporúva opaite punto de ruptura-pe, guive xsguive xl, ndorekói ipypekuéra abreviatura punto de ruptura rehegua. Péva ojehu umi mboꞌepy ojeporúgui guive min-width: 0ha yvate gotyo, ha upéicha ndojejokói peteĩ ñeporandu medio rehegua rehe. Umi punto de ruptura hembýva katu oike peteĩ abreviatura punto de ruptura rehegua.

Umi mboꞌepy oñembohéra ojeporúvo formato , , , ha -pe {property}{sides}-{size}g̃uarã ha .xs{property}{sides}-{breakpoint}-{size}smmdlgxl

Oĩhápe propiedad peteĩva:

m- umi clase omoĩvape g̃uarãmargin
p- umi clase omoĩvape g̃uarãpadding

Moõpa umi lado oĩ peteĩva:

t- umi mbo’esyry omoĩvape g̃uarã margin-toptérãpadding-top
b- umi mbo’esyry omoĩvape g̃uarã margin-bottomtérãpadding-bottom
l- umi mbo’esyry omoĩvape g̃uarã margin-lefttérãpadding-left
r- umi mbo’esyry omoĩvape g̃uarã margin-righttérãpadding-right
x- umi mbo’esyry omoĩva mokõivévape g̃uarã *-leftha*-right
y- umi mbo’esyry omoĩva mokõivévape g̃uarã *-topha*-bottom
blank - umi mboꞌepy omoĩva peteĩ margintérã paddingopaite 4 elemento ykére g̃uarã

Oĩháme tuichakue peteĩva:

0- umi mbo’esyry omboykévape g̃uarã margintérã paddingomoĩvo chupe0
1- (por defecto) umi clase omoĩvape g̃uarã pe margintérã paddingto$spacer * .25
2- (por defecto) umi clase omoĩvape g̃uarã pe margintérã paddingto$spacer * .5
3- (por defecto) umi clase omoĩvape g̃uarã pe margintérã paddingto$spacer
4- (por defecto) umi clase omoĩvape g̃uarã pe margintérã paddingto$spacer * 1.5
5- (por defecto) umi clase omoĩvape g̃uarã pe margintérã paddingto$spacer * 3
auto- umi clase omoĩvape g̃uarã pe marginto auto

(Ikatu emoĩve tuichakue emoĩvo jeikepyre $spacersSass mapa variable-pe).

Tembiecharã

Ko’ápe oĩ techapyrã representativo ko’ã clase rehegua:

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

Centrado horizontal rehegua

Avei, Bootstrap oguereko avei peteĩ .mx-automboꞌepy oñecentra hag̃ua horizontalmente contenido nivel bloque ancho fijo rehegua —heꞌiséva, contenido oguerekóva display: blockha peteĩ widthconjunto—omohenda rupi umi margen horizontal -pe auto.

Elemento oñecentráva

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

Margen negativo rehegua

CSS-pe, marginumi mbaꞌekuaarã ikatu oipuru umi mbaꞌekuaarã vai ( paddingndaikatúi). 4.2 guive, romoĩma utilidad margen negativo rehegua opaite papapy entero ndahaꞌeiva cero rehegua oñemboguapyvaꞌekue yvateve (techapyrã, 1, 2, 3, 4, 5). Ko’ã utilidad iporãiterei ojepersonaliza haguã umi canalización columna red rehegua umi punto de ruptura rupi.

Pe ñe’ẽjoaju haimete ojogua umi utilidad margen positivo por defecto, ha katu oñembojoapývo npe tuichakue ojejeruréva mboyve. Ko'ápe oĩ peteĩ clase techapyrã ha'éva contrario .mt-1:

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

Ko’ápe oĩ peteĩ techapyrã oñemboheko hag̃ua Bootstrap cuadrícula pe mdpunto de ruptura mediano ( )-pe ha yvateve. Rombohetave pe .colacolchado ndive .px-md-5ha upéi rocontrarresta upéva ndive .mx-md-n5pe túva rehe .row.

Acolchado de columna personalizada rehegua

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