Espazamento
Bootstrap inclúe unha ampla gama de clases de utilidade de marxe de resposta abreviada, recheo e oco para modificar a aparencia dun elemento.
Marxe e recheo
Asignar valores de adaptación margin
ou padding
valores a un elemento ou a un subconxunto dos seus lados con clases abreviadas. Inclúe compatibilidade con propiedades individuais, todas as propiedades e propiedades verticais e horizontais. As clases constrúense a partir dun mapa Sass predeterminado que vai de .25rem
a 3rem
.
Usa o módulo de deseño de cuadrícula CSS? Considere usar a utilidade gap .
Cualificación
As utilidades de espazamento que se aplican a todos os puntos de interrupción, de xs
a xxl
, non teñen ningunha abreviatura de punto de interrupción. Isto débese a que esas clases aplícanse desde min-width: 0
e cara arriba e, polo tanto, non están vinculadas a unha consulta de medios. Os puntos de interrupción restantes, con todo, inclúen unha abreviatura de punto de interrupción.
As clases son nomeadas co formato {property}{sides}-{size}
para xs
e {property}{sides}-{breakpoint}-{size}
para sm
, md
, lg
, xl
e xxl
.
Onde a propiedade é un dos seguintes:
m
- para as clases que establecenmargin
p
- para as clases que establecenpadding
Onde os lados é un de:
t
- para as clases que establecenmargin-top
oupadding-top
b
- para as clases que establecenmargin-bottom
oupadding-bottom
s
- (inicio) para as clases que se establecenmargin-left
oupadding-left
en LTR,margin-right
oupadding-right
en RTLe
- (fin) para as clases que establecenmargin-right
oupadding-right
en LTR,margin-left
oupadding-left
en RTLx
- para as clases que establecen tanto*-left
e*-right
y
- para as clases que establecen tanto*-top
e*-bottom
- en branco: para as clases que establecen a
margin
oupadding
nos 4 lados do elemento
Onde o tamaño é un de:
0
- para as clases que eliminan omargin
oupadding
axustándoo a0
1
- (por defecto) para as clases que establecen omargin
oupadding
para$spacer * .25
2
- (por defecto) para as clases que establecen omargin
oupadding
para$spacer * .5
3
- (por defecto) para as clases que establecen omargin
oupadding
para$spacer
4
- (por defecto) para as clases que establecen omargin
oupadding
para$spacer * 1.5
5
- (por defecto) para as clases que establecen omargin
oupadding
para$spacer * 3
auto
- para as clases que configuranmargin
como automático
(Podes engadir máis tamaños engadindo entradas á $spacers
variable do mapa Sass).
Exemplos
Aquí tes algúns exemplos representativos destas clases:
.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;
}
Centrado horizontal
Ademais, Bootstrap tamén inclúe unha .mx-auto
clase para centrar horizontalmente o contido a nivel de bloque de ancho fixo, é dicir, contido que ten display: block
e un width
conxunto, configurando as marxes horizontais en auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Marxe negativa
En CSS, margin
as propiedades poden utilizar valores negativos ( padding
non pode). Estas marxes negativas están desactivadas por defecto , pero pódense activar en Sass configurando $enable-negative-margins: true
.
A sintaxe é case a mesma que as utilidades de marxe positiva predeterminadas, pero coa adición de n
antes do tamaño solicitado. Aquí tes un exemplo de clase que é o contrario de .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
Ao usar display: grid
, podes facer uso das gap
utilidades do contedor da rede principal. Isto pode aforrar ao ter que engadir utilidades de marxe aos elementos individuais da rede (fillos dun display: grid
contedor). As utilidades de Gap responden por defecto e xéranse a través da nosa API de utilidades, baseada no $spacers
mapa Sass.
<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>
A compatibilidade inclúe opcións de resposta para todos os puntos de interrupción da grella de Bootstrap, así como seis tamaños do $spacers
mapa ( 0
– 5
). Non hai .gap-auto
clase de utilidade xa que é efectivamente a mesma que .gap-0
.
Sass
Mapas
As utilidades de espazamento decláranse a través do mapa Sass e despois xéranse coa nosa API de utilidades.
$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
As utilidades de espazamento decláranse na nosa API de utilidades en scss/_utilities.scss
. Aprende a usar a API de utilidades.
"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
),