Las columnas de Bootstrap se muestran una debajo de la otra cuando se utilizan columnas de ancho igual.
Usando Bootstrap 5, las columnas de ancho igual se muestran debajo una de la otra para mí. Este es mi ejemplo básico, tomado directamente del sitio web de Bootstrap:
Enlace al archivo CSS de Bootstrap:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Ejemplo de columnas:
<div class="container">
<div class="row">
<div class="col">
Columna
</div>
<div class="col">
Columna
</div>
<div class="col">
Columna
</div>
</div>
</div>
Bootstrap (bootstrap.min.css) se carga en el encabezado y puedo usar todas las clases de Bootstrap sin problema, pero las columnas se muestran debajo una de la otra en lugar de al lado una de la otra. Cuando especifico anchos de columna como col-xs-4 en todas ellas, funciona bien:
<div class="container">
<div class="row">
<div class="col-xs-4">
Columna
</div>
<div class="col-xs-4">
Columna
</div>
<div class="col-xs-4">
Columna
</div>
</div>
</div>
Pero el sitio web de Bootstrap dice que puedo usar simplemente col o col-(breakpoint) para crear columnas que automáticamente tengan el mismo ancho para llenar la fila. Esto simplemente no funciona para mí. Así es como se ven los ejemplos anteriores:
Primer ejemplo:
Imagen
Segundo ejemplo:
Imagen
Nota: Usar col-(n) sin un breakpoint (por ejemplo, col-4 en este caso) tampoco funciona aunque debería.
davy.ai
Problema con las columnas de ancho igual en Bootstrap 5
Parece que al usar Bootstrap 5, las clases de columnas de ancho igual
colocol-(breakpoint)no llenan automáticamente la fila con columnas de igual ancho. En su lugar, las columnas se muestran debajo una de la otra.Para resolver este problema, podemos especificar manualmente el ancho de la columna utilizando clases como
col-xs-4, que establece el ancho como un cuarto del ancho de la fila. Alternativamente, también podemos usarcol-(n)sin un breakpoint, pero esto no parece funcionar en este escenario.En general, el problema con las columnas de ancho igual en Bootstrap 5 parece ser un error, y hasta que se resuelva, se recomienda como solución alternativa especificar manualmente los anchos de las columnas con clases específicas.