Bootstrap tem estofamento de construção e classes de margem?

O Bootstrap 4 tem uma nova notação para as classes de margem e estofamento. Ver a documentação de Bootstrap 4. 0 - espaçamento de documentação .

Da documentação:

Notação

Utilitários de espaçamento que se aplicam a todos os pontos de paragem, desde {[[0]} até {1]}, têm não têm abreviaturas de breakpoint. Isto é porque essas aulas são aplicado a partir de min-width: 0 e para cima, e, portanto, não estão vinculados por um meio de comunicação consulta. Os restantes pontos de paragem, no entanto, incluir um ponto de paragem abreviatura.

As classes são nomeadas usando o formato {property}{sides}-{size} para xs e {property}{sides}-{breakpoint}-{size} para sm, md, lg, e xl.

Exemplos

.mt-0 { margin-top: 0 !important; }

.p-3 { padding: $spacer !important; }

Você pode definitivamente fazer isso com a classe col-xx-offset-xx:

<div class="col-xs-4">
</div>

<div class="col-xs-7 col-xs-offset-1">
</div>

Quanto a adicionar margin ou padding directamente aos elementos, existem algumas formas simples de o fazer, dependendo do seu elemento. Pode utilizar btn-lg ou label-lg ou well-lg. Se alguma vez te perguntas, como posso dar este acolchoado? Tente adicionar o primário class name + lg ou sm ou md dependendo do seu tamanho necessidades:

<button class="btn btn-success btn-lg btn-block">Big Button w/ Display: Block</button>

Estou a adicionar este código ao meu projecto Bootstrap3. 3 com as mesmas colunas de grelha pontos de paragem, com base na resposta @guest. Antes de eu ter usado o Bootstrap 4 padding e ajudante de margens que seens para ser uma boa escolha.

/*Margin and Padding helpers*/
/*xs*/
.p-xs { padding: .25em; }
.p-x-xs { padding: 0 .25em; }
.p-y-xs { padding: .25em 0 ; }
.p-t-xs { padding-top: .25em; }
.p-r-xs { padding-right: .25em; }
.p-b-xs { padding-bottom: .25em; }
.p-l-xs { padding-left: .25em; }
.m-xs { margin: .25em; }
.m-x-xs { margin: 0 .25em; }
.m-y-xs { margin: .25em 0 ; }
.m-r-xs { margin-right: .25em; }
.m-l-xs { margin-left: .25em; }
.m-t-xs { margin-top: .25em; }
.m-b-xs { margin-bottom: .25em; }
/*sm*/
@media (min-width:768px){
/*sm*/
.p-sm { padding: .5em; }
.p-x-sm { padding: 0 .5em; }
.p-y-sm { padding: .5em 0 ; }
.p-t-sm { padding-top: .5em; }
.p-r-sm { padding-right: .5em; }
.p-b-sm { padding-bottom: .5em; }
.p-l-sm { padding-left: .5em; }
.m-sm { margin: .5em; }
.m-x-sm { margin: 0 .5em; }
.m-y-sm { margin: .5em 0 ; }
.m-t-sm { margin-top: .5em; }
.m-r-sm { margin-right: .5em; }
.m-b-sm { margin-bottom: .5em; }
.m-l-sm { margin-left: .5em; }
}

/*md*/
@media (min-width: 992px){
.p-md { padding: 1em; }
.p-x-md { padding: 0 1em; }
.p-y-md { padding: 1em 0; }
.p-t-md { padding-top: 1em; }
.p-r-md { padding-right: 1em; }
.p-b-md { padding-bottom: 1em; }
.p-l-md { padding-left: 1em; }
.m-md { margin: 1em; }
.m-x-md { margin: 0 1em; }
.m-y-md { margin: 1em 0 ; }
.m-t-md { margin-top: 1em; }
.m-r-md { margin-right: 1em; }
.m-b-md { margin-bottom: 1em; }
.m-l-md { margin-left: 1em; }
}

/*lg*/
@media (min-width: 1200px){
.p-lg { padding: 1.5em; }
.p-x-lg { padding: 0 1.5em; }
.p-y-lg { padding: 1.5em 0; }
.p-t-lg { padding-top: 1.5em; }
.p-r-lg { padding-right: 1.5em; }
.p-b-lg { padding-bottom: 1.5em; }
.p-l-lg { padding-left: 1.5em; }
.m-lg { margin: 1.5em; }
.m-x-lg { margin: 0 1.5em; }
.m-y-lg { margin: 1.5em 0; }
.m-t-lg { margin-top: 1.5em; }
.m-r-lg { margin-right: 1.5em; }
.m-b-lg { margin-bottom: 1.5em; }
.m-l-lg { margin-left: 1.5em; }
}
/*xl*/
.p-xl { padding: 3em; }
.p-x-xl { padding: 0 3em; }
.p-y-xl { padding: 3em 0 ; }
.p-t-xl { padding-top: 3em; }
.p-r-xl { padding-right: 3em; }
.p-b-xl { padding-bottom: 3em; }
.p-l-xl { padding-left: 3em; }
.m-xl { margin: 3em; }
.m-x-xl { margin: 0 3em; }
.m-y-xl { margin: 3em 0; }
.m-t-xl { margin-top: 3em; }
.m-r-xl { margin-right: 3em; }
.m-b-xl { margin-bottom: 3em; }
.m-l-xl { margin-left: 3em; }``

Isto é tirado dos médicos e funciona muito bem. Aqui está a ligação.

• m-para classes que fixam margem
• para classes que ajustam o enchimento

Onde os lados são um dos:

• T - para classes que definem margem-top ou enchimento-top
• B - para classes que definem margem-fundo ou enchimento-fundo
• l - para classes que definem margem-esquerda ou enchimento-Esquerda
• r - para classes que ajustam margem-direita ou enchimento-direita

Se quiser dar margem à utilização à esquerda mt-x onde x representa [1,2,3,4,5]

O mesmo para enchimento

O exemplo é como

<div class = "mt-5"></div>
<div class = "pt-5"></div>

Utilizar apenas p-x ou m-x para obter enchimento e Margem de x de todos os lados.