in English

Espaçamento

O Bootstrap inclui uma ampla variedade de classes de utilitários de margem, preenchimento e intervalo responsivos abreviados para modificar a aparência de um elemento.

Nesta página

Margem e preenchimento

Atribua valores marginou paddingvalores responsivos a um elemento ou a um subconjunto de seus lados com classes abreviadas. Inclui suporte para propriedades individuais, todas as propriedades e propriedades verticais e horizontais. As classes são construídas a partir de um mapa Sass padrão que varia .25remde 3rem.

Usando o módulo de layout CSS Grid? Considere usar o utilitário gap .

Notação

Os utilitários de espaçamento que se aplicam a todos os pontos de interrupção, de xsa xxl, não possuem abreviação de ponto de interrupção. Isso ocorre porque essas classes são aplicadas de min-width: 0e para cima e, portanto, não são vinculadas a uma consulta de mídia. Os pontos de interrupção restantes, no entanto, incluem uma abreviação de ponto de interrupção.

As classes são nomeadas usando o formato {property}{sides}-{size}para xse {property}{sides}-{breakpoint}-{size}para sm, md, lg, xle xxl.

Quando a propriedade é uma das seguintes:

m- para classes que definemmargin
p- para classes que definempadding

Onde lados é um dos seguintes:

t- para classes que definem margin-topoupadding-top
b- para classes que definem margin-bottomoupadding-bottom
s- (iniciar) para classes que definem margin-leftou padding-leftem LTR, margin-rightou padding-rightem RTL
e- (fim) para classes que se definem margin-rightou padding-rightem LTR, margin-leftou padding-leftem RTL
x- para classes que definem tanto *-lefte*-right
y- para classes que definem tanto *-tope*-bottom
blank - para classes que definem um marginou paddingem todos os 4 lados do elemento

Onde o tamanho é um dos seguintes:

0- para classes que eliminam o marginou paddingconfigurando-o para0
1- (por padrão) para classes que definem o marginou paddingpara$spacer * .25
2- (por padrão) para classes que definem o marginou paddingpara$spacer * .5
3- (por padrão) para classes que definem o marginou paddingpara$spacer
4- (por padrão) para classes que definem o marginou paddingpara$spacer * 1.5
5- (por padrão) para classes que definem o marginou paddingpara$spacer * 3
auto- para classes que definem margincomo auto

(Você pode adicionar mais tamanhos adicionando entradas à $spacersvariável do mapa Sass.)

Exemplos

Aqui estão alguns exemplos representativos dessas classes:

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

Centralização horizontal

Além disso, o Bootstrap também inclui uma .mx-autoclasse para centralizar horizontalmente o conteúdo de nível de bloco de largura fixa - ou seja, o conteúdo que tem display: blocke um widthconjunto - definindo as margens horizontais como auto.

Elemento centralizado

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

Margem negativa

Em CSS, marginas propriedades podem utilizar valores negativos ( paddingnão podem). Essas margens negativas são desabilitadas por padrão , mas podem ser habilitadas no Sass configurando $enable-negative-margins: true.

A sintaxe é quase a mesma dos utilitários de margem positiva padrão, mas com a adição de nantes do tamanho solicitado. Aqui está uma classe de exemplo que é o oposto de .mt-1:

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

Lacuna

Ao usar display: grid, você pode usar gaputilitários no contêiner de grade pai. Isso pode economizar a necessidade de adicionar utilitários de margem a itens de grade individuais (filhos de um display: gridcontêiner). Os utilitários Gap são responsivos por padrão e são gerados por meio de nossa API de utilitários, com base no $spacersmapa Sass.

Item de grade 1

Item de grade 2

Item de grade 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>

O suporte inclui opções responsivas para todos os pontos de interrupção de grade do Bootstrap, bem como seis tamanhos do $spacersmapa ( 0– 5). Não há .gap-autoclasse de utilitário, pois é efetivamente o mesmo que .gap-0.

Sass

Mapas

Utilitários de espaçamento são declarados via mapa Sass e então gerados com nossa API de utilitários.

$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 utilitários

Os utilitários de espaçamento são declarados em nossa API de utilitários em scss/_utilities.scss. Saiba como usar a API de utilitários.

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