¿Cómo agregar margen superior a class="row"elementos usando el marco de arranque de twitter?

Editar o anular la fila en el bootstrap de Twitter es una mala idea, porque esta es una parte central del andamiaje de la página y necesitará filas sin un margen superior.

Para resolver esto, cree una nueva clase "top-buffer" que agregue el margen estándar que necesita.

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

Y luego úselo en los divisores de fila donde necesita un margen superior.

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

Ok, solo para hacerle saber lo que sucedió entonces, arreglé el uso de algunas clases nuevas como Acyra dice anteriormente:

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

cuando quiero lo hago <div class="row top7"></div>

para una mejor respuesta, puede agregar en margin-top:7%lugar de, 5pxpor ejemplo: D

Bootstrap 3

Si necesita separar filas en bootstrap, simplemente puede usar .form-group. Esto agrega un margen de 15 píxeles al final de la fila.

En su caso, para obtener un margen superior, puede agregar esta clase al .rowelemento anterior

<div class="row form-group">

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

Bootstrap 4

Puedes usar clases de espaciado incorporadas

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

La "t" en el nombre de la clase hace que se aplique solo al lado "superior", hay clases similares para la parte inferior, izquierda, derecha. El número define el tamaño del espacio.

Para Bootstrap 4, el espaciado debe aplicarse usando

clases de utilidad abreviada

en el siguiente formato:

{propiedad} {lados} - {tamaño}

Donde la propiedad es uno de:

• m - para clases que establecen margen
• p - para clases que establecen relleno

Donde lados es uno de:

• t - para clases que establecen margin-top o padding-top
• b - para clases que establecen margen inferior o relleno inferior
• l - para clases que establecen margen izquierdo o relleno izquierdo
• r - para clases que establecen margen derecho o relleno derecho
• x - para clases que establecen * -left y * -right
• y - para clases que establecen tanto * -top como * -bottom
• en blanco: para las clases que establecen un margen o relleno en los 4 lados del elemento

Donde el tamaño es uno de:

• 0: para clases que eliminan el margen o el relleno al establecerlo en 0
• 1 - (por defecto) para las clases que establecen el margen o el relleno en $ spacer * .25
• 2 - (por defecto) para las clases que establecen el margen o el relleno en $ spacer * .5
• 3 - (por defecto) para las clases que establecen el margen o el relleno en $ spacer
• 4 - (por defecto) para las clases que establecen el margen o el relleno en $ spacer * 1.5
• 5 - (por defecto) para las clases que establecen el margen o el relleno en $ spacer * 3
• auto: para clases que establecen el margen en auto

Entonces deberías estar haciendo cualquiera de estos:

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

Lea los documentos para más explicaciones. Prueba ejemplos en vivo por aquí .

A veces, el margen superior puede causar problemas de diseño:

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

Por lo tanto, recomiendo crear "clases de margen inferior" en lugar de "clases de margen superior" y aplicarlas al elemento anterior.

Si está utilizando Bootstrap importando MENOS archivos Bootstrap, intente definir las clases de margen inferior con espacios proporcionales del tema 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);}  

Agregué estas clases a mi hoja de estilo bootstrap

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

Ejemplo

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

Estoy usando estas clases para alterar el margen 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; }

Cuando necesito un elemento para tener un espacio de 2em del elemento anterior, lo uso así:

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

Si prefiere los píxeles, cambie los em a px para tenerlo a su manera.

Puede usar la siguiente clase para 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: abreviatura de los nombres de clase CSS mt-1, mt-2 (mt-lg-5, mt-sm-2), lo mismo para la parte inferior, derecha, izquierda y también tiene la clase automática ml- auto

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

Las unidades son de 1a 5: en las variables.scss, lo que significa que si establece mt-1 le da .25rem de margen 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;

leer más aquí

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

Agregue a esta clase en el archivo .css:

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

o hacer una nueva clase y agregarla al elemento

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

Si desea cambiar solo en una página, agregue la siguiente regla de estilo:

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

En Bootstrap 4 alpha + puedes usar esto

class margin-bottom-5

Las clases se nombran usando el 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 (solo canalón, sin márgenes alrededor):

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

CSS (márgenes iguales alrededor, 15 px / 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>

(con SASS o LESS 15px podría ser una variable de bootstrap)

<div class="row row-padding">

código simple

puedes agregar este código:

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

Simplemente use este bs3-upgradeayudante para espacios y alineación de texto ...

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

Si está usando BootStrap 3.3.7, puede usar la biblioteca de código abierto bootstrap-spacer a través de NPM

npm install bootstrap-spacer

o puedes visitar la página de github:

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

Aquí hay un ejemplo de cómo funciona esto para espaciar filas usando la clase .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>

Si necesita espacios entre columnas, también puede agregar la clase .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>

Y también puede combinar varias clases .row-spacer y .row-col-spacer juntas:

<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>

Mi truco No tan limpio, pero funciona bien para mí.

<p>&nbsp;</p>