¿Cómo agregar los elementos margin top to class="row"
usando Twitter bootstrap framework?
Editar o anular la fila en Twitter bootstrap es una mala idea, porque esta es una parte central del andamio de la página y necesitará filas sin un margen superior.
Para solucionar esto, cree una nueva clase “top-buffer” que agregue el margen estándar que necesita.
.top-buffer { margin-top:20px; }
Y luego utilícelo en los separadores de filas donde necesita un margen superior.
...
De acuerdo solo para que sepas lo que pasó entonces, lo arreglé usando algunas clases nuevas como dice Acyra arriba:
.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 quiera, lo hago
para una mejor respuesta, puede agregar margin-top:7%
lugar de 5px
por ejemplo: D
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 margen superior, puede agregar esta clase al elemento .row
anterior
/* From bootstrap.css */ .form-group { margin-bottom: 15px; }
Puedes usar las clases de espaciamiento incorporadas
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.
Algunas 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 archivos LESS Bootstrap, intente definir las clases de margen inferior con espacios temáticos Bootstrap proporcionales:
.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
Vertically offset text.
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 espaciado de 2em del elemento anterior, lo uso así:
Something here
Si prefiere píxeles, cambie la em a px para que lo haga a su manera.
Para Bootstrap 4, el espaciado debe aplicarse usando
clases de utilidad abreviada
en el siguiente formato:
{propiedad} {lados} – {tamaño}
Donde la propiedad es una de:
Donde lados es uno de:
Donde el tamaño es uno de:
Entonces deberías estar haciendo cualquiera de estos:
...
Lea los documentos para obtener más explicaciones.
Puede usar la siguiente clase para bootstrap 4:
mt-0
mt-1
mt-2
mt-3
mt-4
…
Agregue a esta clase en el archivo .css:
.row { margin-left: -20px; *zoom: 1; margin-top: 50px; }
o crea una nueva clase y agrégala al elemento
.rowSpecificFormName td { margin-top: 50px; }
Bootstrap 4 alpha, para margin-top: abreviatura de nombres de clase CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) para la parte inferior, derecha, izquierda, y también tiene auto clase ml- auto
Las unidades son de 1
a 5
: en las variables.scss lo que significa que si configura mt-1 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
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
Bootstrap3
CSS (solo canaleta, 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, 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:
first second third
(con SASS o LESS 15px podría ser una variable de bootstrap)
puedes agregar este código:
[class*="col-"] { padding-top: 1rem; padding-bottom: 1rem; }
Simplemente use este bs3-upgrade
para espaciamientos y alineación de texto …
Mi truco No tan limpio, pero funciona bien para mí