Contamos con la contestación a esta obstáculo, o por lo menos eso creemos. Si sigues con alguna inquietud dínoslo, que sin dudarlo te ayudaremos
Solución:
Esta respuesta presenta un truco, pero le recomiendo encarecidamente que use flexbox (como se indica en la respuesta de @Haschem), ya que ahora es compatible en todas partes.
Enlace de demostraciones:
– Bootstrap 3
– Bootstrap 4 alpha 6
Aún puede usar una clase personalizada cuando la necesite:
Utilizando inline-block agrega espacio adicional entre bloques si deja un espacio real en su código (como ...
...). Este espacio adicional rompe nuestra cuadrícula si los tamaños de columna suman 12:
Big
Small
Aquí, tenemos espacios adicionales entre
y
(un retorno de carro y 2 pestañas / 8 espacios). Y entonces…
¡¡Vamos a patear este espacio extra !!
Big
Small
Observe la aparentemente comentarios inútiles ? Son importante – sin ellos, el espacio en blanco entre el
los elementos ocuparán espacio en el diseño, rompiendo el sistema de cuadrícula.
Nota: Bootply se ha actualizado
Diseño de caja flexible
Con la llegada de CSS Flexible Box, muchas de las pesadillas de los diseñadores web1 han sido resueltos. Uno de los más hacky, la alineación vertical. Ahora es posible incluso en alturas desconocidas.
“Dos décadas de hacks de diseño están llegando a su fin. Quizás no mañana, pero pronto, y por el resto de nuestras vidas”.
– CSS legendario Eric Meyer en W3Conf 2013
Flexible Box (o en resumen, Flexbox), es un nuevo sistema de diseño que está diseñado específicamente para propósitos de diseño. La especificación dice:
El diseño flexible es superficialmente similar al diseño de bloques. Carece de muchas de las propiedades más complejas centradas en texto o documento que se pueden usar en el diseño de bloques, como flotantes y columnas. A cambio, obtiene herramientas simples y poderosas para distribuir espacio y alinear contenido de la manera que las aplicaciones web y las páginas web complejas a menudo necesitan.
¿Cómo puede ayudar en este caso? Bien, veamos.
Columnas alineadas verticalmente
Usando Twitter Bootstrap tenemos .rowestoy teniendo algo .col-*s. Todo lo que tenemos que hacer es mostrar el .row2 como una caja de contenedor flexible y luego alinee todos sus elementos flexibles (las columnas) verticalmente por align-items propiedad.
El área coloreada muestra el cuadro de relleno de columnas.
Aclarando sobre align-items: center
8.3 Alineación del eje transversal: el align-items propiedad
Los elementos flexibles se pueden alinear en el eje transversal de la línea actual del contenedor flexible, similar a justify-content pero en la dirección perpendicular. align-items establece la alineación predeterminada para todos los elementos del contenedor flexible, incluidos los elementos flexibles anónimos.
align-items: center;
Por valor central, el cuadro de margen del elemento flexible se centra en el eje transversal dentro de la línea.
Alerta grande
Nota importante n. ° 1: Twitter Bootstrap no especifica el width de columnas en dispositivos extrapequeños a menos que proporcione uno de .col-xs-# clases a las columnas.
Por lo tanto, en esta demostración en particular, he usado .col-xs-* clases para que las columnas se muestren correctamente en modo móvil, porque especifica el width de la columna explícitamente.
Pero alternativamente podrías apagar el diseño de Flexbox simplemente cambiando display: flex; para display: block; en tamaños de pantalla específicos. Por ejemplo:
/* Extra small devices (767px and down) */
@media (max-width: 767px)
.row.vertical-align
display: block; /* Turn off the flexible box layout */
O podrías especificar .vertical-alignsolamente en tamaños de pantalla específicos como este:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px)
.row.vertical-align
display: flex;
align-items: center;
En ese caso, iría con el enfoque de @ KevinNelson.
Nota importante n. ° 2: Los prefijos de proveedores se omiten por brevedad. La sintaxis de Flexbox ha cambiado durante el tiempo. La nueva sintaxis escrita no funcionará en versiones anteriores de navegadores web (¡pero no tan antiguas como Internet Explorer 9! Flexbox es compatible con Internet Explorer 10 y posteriores).
Esto significa que también debe usar propiedades con prefijo de proveedor como display: -webkit-box y así sucesivamente en modo de producción.
Si hace clic en “Alternar vista compilada” en la demostración, verá la versión prefijada de las declaraciones CSS (gracias a Autoprefixer).
Columnas de altura completa con contenido alineado verticalmente
Como puede ver en la demostración anterior, las columnas (los elementos flexibles) ya no son tan altas como su contenedor (la caja del contenedor flexible. .row elemento).
Esto se debe al uso center valor por align-items propiedad. El valor predeterminado es stretch para que los elementos puedan ocupar toda la altura del elemento principal.
Para solucionarlo, puede agregar display: flex; a las columnas también:
EJEMPLO AQUÍ(Nuevamente, cuidado con los comentarios)
.vertical-align
display: flex;
flex-direction: row;
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"]
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
La salida
El área coloreada muestra el cuadro de relleno de columnas.
Por último, si bien no menos importante, tenga en cuenta que las demostraciones y los fragmentos de código aquí están destinados a darle una idea diferente, para proporcionar un enfoque moderno para lograr el objetivo. Por favor, tenga en cuenta el “Alerta grande“si va a utilizar este enfoque en sitios web o aplicaciones del mundo real.
Para obtener más información, incluida la compatibilidad con el navegador, estos recursos serían útiles:
Red de desarrolladores de Mozilla: cajas flexibles
Guía de Flexbox – Trucos CSS
HTML5Rocks – Flexbox rápido
SmashingMagazine – Elementos de centrado con Flexbox
Philip Walton – Resuelto por Flexbox
Puedo usar: Módulo de diseño de caja flexible
1. Alinear verticalmente una imagen dentro de un div con una altura sensible2. Es mejor usar una clase adicional para no alterar la configuración predeterminada de Twitter Bootstrap. .row.
