html5 - top - Agregue espacio entre columnas apiladas verticalmente en Bootstrap 4
padding bootstrap 3 (4)
Así es como terminé haciendo que esto funcione:
.row [class*="col-"] {
@extend .mb-4;
&:last-child {
@extend .mb-0;
}
@extend .mb-md-5;
&:nth-last-of-type(1),
&:nth-last-of-type(2),
&:nth-last-of-type(3) {
@extend .mb-md-0;
}
}
Desafortunadamente, no parece haber una buena manera de administrar el espacio vertical entre columnas que pasan de una pila horizontal a una pila vertical en ciertos puntos de interrupción. Parece que hay una solución cuando se trata de un formulario , pero esa no es la situación aquí. He probado esta solución , pero no funciona cuando hay varias columnas que se agrupan en una fila.
Para ilustrar mi escenario, aquí está la estructura de mi HTML:
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
col 1
</div>
<div class="col-md-4">
col 2
</div>
<div class="col-md-4">
col 3
</div>
<div class="col-md-4">
col 4
</div>
<div class="col-md-4">
col 5
</div>
<div class="col-md-4">
col 6
</div>
</div>
</div>
</body>
https://jsfiddle.net/b74a3kbs/6/
A tamaño de dispositivo mediano (md) y superior, me gustaría que haya espacio entre las dos "filas" de columnas, pero no espacio encima de la "primera fila" de 3 columnas y ninguna debajo de la "segunda fila" de 3 columnas Cuando las columnas se apilan verticalmente por debajo del tamaño medio del dispositivo (md), me gustaría que haya espacio entre cada una de las columnas, pero ninguna por encima del primer hijo y ninguna por debajo del último hijo.
Idealmente, la solución funcionaría independientemente de cuántas columnas (por ejemplo, 3, 5, 6, 12) están contenidas dentro de la fila.
Terminé con esta solución:
@include media-breakpoint-down(xs) {
[class*="col-sm"]:not(:last-child){
margin-bottom: 15px;
}
}
@include media-breakpoint-down(sm) {
[class*="col-md"]:not(:last-child){
margin-bottom: 15px;
}
}
@include media-breakpoint-down(md) {
[class*="col-lg"]:not(:last-child){
margin-bottom: 15px;
}
}
Use las nuevas
utilidades de espaciado
Bootstrap 4.
Por ejemplo,
mb-3
agrega margen inferior de
1rem
.
No se necesita CSS adicional.
http://www.codeply.com/go/ECnbgvs9Ez
<div class="container">
<div class="row">
<div class="col-md-4 mb-3">
col 1
</div>
<div class="col-md-4 mb-3">
col 2
</div>
<div class="col-md-4 mb-3">
col 3
</div>
<div class="col-md-4 mb-3">
col 4
</div>
<div class="col-md-4 mb-3">
col 5
</div>
<div class="col-md-4">
col 6
</div>
</div>
</div>
Las utilidades de espaciado son receptivas, por lo que puede aplicarlas para puntos de interrupción específicos (es decir,
mb-0 mb-md-3
)
Si desea una solución CSS , use la solución explicada en la pregunta 3.x relacionada ( no depende del uso de un formulario): https://jsfiddle.net/zdLy6jb1/2/
/* css only solution */
[class*="col-"]:not(:last-child){
margin-bottom: 15px;
}
Nota: el
col-lg-4
es extraño en su marcado desde
col-lg-4 col-md-4
,
es lo mismo que
col-md-4
.
ver fragmento a continuación o jsfiddle
funcionará independientemente de cuántas columnas tenga o filas
primero (en pantalla grande) todas las filas tienen
margin-bottom
excepto la última, luego en pantalla mediana, las filas no tendrán margen y las columnas tendrán margen inferior excepto la
última columna
de la
última fila
.row {
margin-bottom:30px;
}
.row:last-child{
margin-bottom:0;
}
.row [class*="col-"] {
border:1px solid red;
}
@media only screen and (max-width: 768px) {
.row {
margin:0
}
.row [class*="col-"] {
margin-bottom:30px;
}
.row:last-child [class*="col-"]:last-child{
margin-bottom:0;
}
}
<body>
<h1 class="display-3">
hey
</h1>
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-4">
col 1
</div>
<div class="col-md-4 col-lg-4">
col 2
</div>
<div class="col-md-4 col-lg-4">
col 3
</div>
</div>
<div class="row">
<div class="col-md-4 col-lg-4">
col 4
</div>
<div class="col-md-4 col-lg-4">
col 5
</div>
<div class="col-md-4 col-lg-4">
col 6
</div>
</div>
</div>
</body>