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 margin
térã padding
valores 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 .25rem
guive 3rem
.
Notación rehegua
Umi utilidad espaciado rehegua ojeporúva opaite punto de ruptura-pe, guive xs
guive xl
, ndorekói ipypekuéra abreviatura punto de ruptura rehegua. Péva ojehu umi mboꞌepy ojeporúgui guive min-width: 0
ha 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}
sm
md
lg
xl
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-top
térãpadding-top
b
- umi mbo’esyry omoĩvape g̃uarãmargin-bottom
térãpadding-bottom
l
- umi mbo’esyry omoĩvape g̃uarãmargin-left
térãpadding-left
r
- umi mbo’esyry omoĩvape g̃uarãmargin-right
térãpadding-right
x
- umi mbo’esyry omoĩva mokõivévape g̃uarã*-left
ha*-right
y
- umi mbo’esyry omoĩva mokõivévape g̃uarã*-top
ha*-bottom
- blank - umi mboꞌepy omoĩva peteĩ
margin
térãpadding
opaite 4 elemento ykére g̃uarã
Oĩháme tuichakue peteĩva:
0
- umi mbo’esyry omboykévape g̃uarãmargin
térãpadding
omoĩvo chupe0
1
- (por defecto) umi clase omoĩvape g̃uarã pemargin
térãpadding
to$spacer * .25
2
- (por defecto) umi clase omoĩvape g̃uarã pemargin
térãpadding
to$spacer * .5
3
- (por defecto) umi clase omoĩvape g̃uarã pemargin
térãpadding
to$spacer
4
- (por defecto) umi clase omoĩvape g̃uarã pemargin
térãpadding
to$spacer * 1.5
5
- (por defecto) umi clase omoĩvape g̃uarã pemargin
térãpadding
to$spacer * 3
auto
- umi clase omoĩvape g̃uarã pemargin
to auto
(Ikatu emoĩve tuichakue emoĩvo jeikepyre $spacers
Sass 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-auto
mboꞌepy oñecentra hag̃ua horizontalmente contenido nivel bloque ancho fijo rehegua —heꞌiséva, contenido oguerekóva display: block
ha peteĩ width
conjunto—omohenda rupi umi margen horizontal -pe auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margen negativo rehegua
CSS-pe, margin
umi mbaꞌekuaarã ikatu oipuru umi mbaꞌekuaarã vai ( padding
ndaikatú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 n
pe 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 md
punto de ruptura mediano ( )-pe ha yvateve. Rombohetave pe .col
acolchado ndive .px-md-5
ha upéi rocontrarresta upéva ndive .mx-md-n5
pe túva rehe .row
.
<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>