Bootstrap xs columnas envuelven

Para el tamaño xs más pequeño, incluso si las columnas sumn 12, no funcionan como se espera si el ancho de la pantalla disminuye más allá de cierto límite. Por ejemplo:-

Esperaría que, si disminuyo el tamaño, la última columna se apile hasta el final de la pantalla. Sin embargo, éste no es el caso. A medida que la pantalla disminuye más allá de un cierto límite, la última columna se cierra hacia el comienzo de la pantalla. He pensado en escribir código css para darle al contenedor min-width. Sin embargo, pensé que el bootstrap podría tener una mejor manera de manejar esto

Este es un problema conocido: https://github.com/twbs/bootstrap/issues/13221

En anchos de pantalla <360 px, las .col-xs-1 comienzan a envolver porque …

“mientras que la columna se establece en ancho: 8.333333% ;, la columna va a tener al menos 30 píxeles de ancho debido al relleno de 15 píxeles de cada lado. Por lo tanto, hay una discrepancia y el navegador simplemente astack las columnas” – @mdo

El problema se puede evitar al no usar col-xs-1 en pantallas muy pequeñas. También debe considerar si la pantalla se redimensionará de manera realista a menos de 360 ​​px. En la mayoría de los casos, no lo es.


Nota: En Bootstrap 4 , col-xs-1 ahora es col-1 .


Relacionado: La red Bootstrap se rompe en el tamaño más pequeño

Funciona bien para mí Pero su código carece de un div de cierre y algunas comillas.