css - cards - Twitter Bootstrap-agrega espacio superior entre filas
bootstrap documentation (17)
¿Cómo agregar elementos de margen superior a class="row" usando el marco de arranque de Twitter?
Bootstrap 3
Si necesita separar filas en bootstrap, simplemente puede usar .form-group . Esto agrega un margen de 15px al final de la fila.
En su caso, para obtener el margen superior, puede agregar esta clase al elemento .row 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.
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 LESS Bootstrap, intente definir las clases de margen inferior con espacios de Tema de 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
<div class="container">
<div class="row voffset2">
<div class="col-lg-12">
<p>
Vertically offset text.
</p>
</div>
</div>
</div>
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 CSS nombres de clase mt-1, mt-2 (mt-lg-5, mt-sm-2) igual para la parte inferior, derecha, izquierda, y también tiene clase automática ml- auto
<div class="mt-lg-1" ...>
Las unidades son de 1 a 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
Bootstrap3
CSS (solo gutter, 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:
<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)
Editar o anular la fila en la rutina de carga de Twitter es una mala idea, ya que esta es una parte central de los andamios 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 divs de fila donde necesita un margen superior.
<div class="row top-buffer"> ...
En Bootstrap 4 alpha + puedes usar este
class margin-bottom-5
Las clases se nombran usando el formato: {property}-{sides}-{size}
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 2em del elemento anterior, lo uso así:
<div class="row margin-top-20">Something here</div>
Si prefieres píxeles, cambia el em a px para que sea a tu manera.
Mi truco No tan limpio, pero funciona bien para mí.
<p> </p>
Ok, solo para que sepas lo que sucedió entonces, lo solucioné usando algunas clases nuevas como lo 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, hago <div class="row top7"></div>
para una mejor respuesta, puede agregar un margin-top:7% lugar de 5px por ejemplo: D
Para Bootstrap 4 el espaciado debe ser aplicado usando
clases de utilidad abreviada
en el siguiente formato:
{propiedad} {lados} - {tamaño}
Donde la propiedad es uno de:
- m - para las clases que establecen el margen
- p - para las clases que establecen el relleno
Donde los lados es uno de:
- t - para las clases que establecen margin-top o padding-top
- b - para las clases que establecen el margen inferior o el relleno inferior
- l - para las clases que establecen el margen izquierdo o el relleno izquierdo
- r - para las clases que establecen el margen derecho o el relleno derecho
- x - para las clases que establecen * -left y * -right
- y - para las clases que establecen * -top y * -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 las clases que eliminan el margen o el relleno estableciéndolo en 0
- 1 - (de forma predeterminada) para las clases que establecen el margen o el relleno en $ spacer * .25
- 2 - (de forma predeterminada) para las clases que establecen el margen o el relleno en $ spacer * .5
- 3 - (de forma predeterminada) para las clases que establecen el margen o el relleno en $ spacer
- 4 - (de forma predeterminada) para las clases que establecen el margen o el relleno en $ spacer * 1.5
- 5 - (de forma predeterminada) para las clases que establecen el margen o el relleno en $ spacer * 3
- auto - para las clases que establecen el margen en auto
Así que deberías estar haciendo cualquiera de estos:
<div class="row mt-1">
<div class="row mt-2">
...
<div class="row mt-5">
Lea los docs para más explicación. Prueba ejemplos en vivo here .
Puedes agregar este código:
[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
}
Puedes usar la siguiente clase para bootstrap 4:
mt-0 mt-1 mt-2 mt-3 mt-4 ...
Si desea cambiar solo en una página, agregue la siguiente regla de estilo:
#myCustomDivID .row {
margin-top:20px;
}
Simplemente use este bs3-upgrade para espaciado y alineación de texto
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>