Como adicionar margem superior aos class="row"elementos usando a estrutura de inicialização do twitter?

Editar ou substituir a linha no bootstrap do Twitter é uma má ideia, porque essa é uma parte essencial do andaime da página e você precisará de linhas sem uma margem superior.

Para resolver isso, crie uma nova classe "buffer superior" que adicione a margem padrão necessária.

.top-buffer { margin-top:20px; }

E, em seguida, use-o nas linhas divs, nas quais você precisa de uma margem superior.

<div class="row top-buffer"> ...

Ok, apenas para que você saiba o que aconteceu, eu consertei usando algumas novas classes, como a Acyra diz acima:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

sempre que eu quero eu faço <div class="row top7"></div>

para obter uma resposta melhor, você pode adicionar, em margin-top:7%vez de, 5pxpor exemplo: D

Bootstrap 3

Se você precisar separar linhas no bootstrap, basta usar .form-group. Isso adiciona margem de 15px ao final da linha.

No seu caso, para obter a margem superior, você pode adicionar esta classe ao .rowelemento anterior

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

Bootstrap 4

Você pode usar classes de espaçamento interno

<div class="row mt-3"></div>

O "t" no nome da classe o aplica apenas ao lado "superior"; existem classes semelhantes para inferior, esquerda e direita. O número define o tamanho do espaço.

Para o Bootstrap 4, o espaçamento deve ser aplicado usando

classes de utilitário de taquigrafia

no seguinte formato:

{propriedade} {lados} - {tamanho}

Onde a propriedade é uma das seguintes:

• m - para classes que definem margem
• p - para classes que definem o preenchimento

Onde lados é um dos seguintes:

• t - para classes que definem margin-top ou padding-top
• b - para classes que definem margem inferior ou preenchimento inferior
• l - para classes que definem margem esquerda ou preenchimento esquerdo
• r - para classes que definem margem direita ou preenchimento direito
• x - para classes que definem * -left e * -right
• y - para classes que definem * -top e * -bottom
• em branco - para classes que definem uma margem ou preenchimento nos 4 lados do elemento

Onde o tamanho é um dos seguintes:

• 0 - para classes que eliminam a margem ou o preenchimento, definindo-o como 0
• 1 - (por padrão) para classes que definem a margem ou o preenchimento para $ espaçador * .25
• 2 - (por padrão) para classes que definem a margem ou o preenchimento para $ espaçador * .5
• 3 - (por padrão) para classes que definem a margem ou o preenchimento para $ spacer
• 4 - (por padrão) para classes que definem a margem ou o preenchimento para $ espaçador * 1,5
• 5 - (por padrão) para classes que definem a margem ou o preenchimento para $ spacer * 3
• auto - para classes que definem a margem como auto

Portanto, você deve executar um destes procedimentos:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

Leia os documentos para obter mais explicações. Experimente exemplos ao vivo aqui .

Às vezes, a margem superior pode causar problemas de design:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Portanto, recomendo criar "classes de margem inferior" em vez de "classes de margem superior" e aplicá-las ao item anterior.

Se você estiver usando o Bootstrap importando arquivos LESS Bootstrap, tente definir as classes na margem inferior com espaços proporcionais ao Tema do Bootstrap:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  

Adicionei essas classes à minha folha de estilo de inicialização

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

Exemplo

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

Estou usando essas classes para alterar a margem superior:

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

Quando eu preciso que um elemento tenha espaçamento 2em do elemento acima, eu o uso assim:

<div class="row margin-top-20">Something here</div>

Se você preferir pixels, altere o em para px para que seja do seu jeito.

Você pode usar a seguinte classe para o bootstrap 4:

mt-0 mt-1 mt-2 mt-3 mt-4 ...

Ref: https://v4-alpha.getbootstrap.com/utilities/spacing/

Bootstrap 4 alpha, para margin-top: nomes abreviados da classe CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) iguais para a parte inferior, direita, esquerda e você também possui a classe automática ml- auto

    <div class="mt-lg-1" ...>

As unidades são de 1a 5: no variables.scss, o que significa que, se você configurar o mt-1, ele dará 0,25rem da margem superior.

$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;

leia mais aqui

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Adicione a esta classe no arquivo .css:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

ou crie uma nova classe e adicione-a ao elemento

.rowSpecificFormName td {
    margin-top: 50px;
}

Se você deseja alterar apenas uma página, adicione a seguinte regra de estilo:

 #myCustomDivID .row {
     margin-top:20px;
 }

No Bootstrap 4 alpha +, você pode usar este

class margin-bottom-5

As classes são nomeadas usando o formato: {property}-{sides}-{size}

just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   {
     margin-top: 25px;  
   }
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>

Bootstrap3

CSS (somente sarjeta, sem margens):

.row.row-gutter {
  margin-bottom: -15px;
  overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
  margin-bottom: 15px;
}

CSS (margens iguais em torno de 15px / 2):

.row.row-margins {
  padding-top: 7px; /* or margin-top: 7px; */
  padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
  margin-top: 8px;
  margin-bottom: 8px;
}

Uso:

<div class="row row-gutter">
    <div class="col col-sm-9">first</div>
    <div class="col col-sm-3">second</div>
    <div class="col col-sm-12">third</div>
</div>

(com SASS ou LESS 15px pode ser uma variável do bootstrap)

<div class="row row-padding">

código simples

você pode adicionar este código:

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

Basta usar este bs3-upgradeauxiliar para espaçamentos e alinhamento de texto ...

https://github.com/studija/bs3-upgrade

Se você estiver usando o BootStrap 3.3.7, poderá usar a biblioteca de código aberto bootstrap-spacer via NPM

npm install bootstrap-spacer

ou você pode visitar a página do github:

https://github.com/chigozieorunta/bootstrap-spacer

Aqui está um exemplo de como isso funciona para espaçar linhas usando a classe .row-spacer:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Se você precisar de espaços entre colunas, também poderá adicionar a classe .row-col-spacer:

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

E você também pode combinar várias classes .row-espaçador e .row-col-espaçador:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

O meu truque. Não é tão limpo, mas funciona bem para mim

<p>&nbsp;</p>