html - bootstrap 3 a bootstrap 4 cols ya no están alineados horizontalmente
css bootstrap-4 (3)
Esta pregunta ya tiene una respuesta aquí:
estoy migrando a bootstrap 4, sin embargo, he cambiado boostrap-min.css para mis páginas de 3 a 4 y mis columnas ahora están alineadas verticalmente hasta donde puedo ver que las columnas son correctas.
También utilicé un violín JS para probar y puedo replicar que todos están verticales allí también. ¿Alguien puede señalarme en la dirección correcta, de cómo he leído la documentación https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match esto debería funcionar
<div class="row">
<div class="col-12">
<div class="col-md-2">
<h1>TEST</h1>
</div>
<div class="col-md-2">
<h1>TEST</h1>
</div>
<div class="col-md-2">
<h1>TEST</h1>
</div>
<div class="col-md-2">
<h1>TEST</h1>
</div>
</div>
</div>
Como
la estructura de cuadrícula bootstrap4 se basa en flexbox
, deberá utilizar la cuadrícula de
row
y
col
cuidado.
Aquí no hay necesidad de
.col-12
div, simplemente envuelva su
.col-2
en una fila.
También envuelva su
.row
dentro de la clase
.container
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.row h1 {
font-size: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-2">
<h1>TEST</h1>
</div>
<div class="col-2">
<h1>TEST</h1>
</div>
<div class="col-2">
<h1>TEST</h1>
</div>
<div class="col-2">
<h1>TEST</h1>
</div>
</div>
</div>
O si no desea eliminar
.col-12
div, use otra fila para ajustar los elementos
.col-2
que es inútil
(solo tratando de mostrarle el concepto de estructura de cuadrícula).
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.row h1 {
font-size: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-2">
<h1>TEST</h1>
</div>
<div class="col-2">
<h1>TEST</h1>
</div>
<div class="col-2">
<h1>TEST</h1>
</div>
<div class="col-2">
<h1>TEST</h1>
</div>
</div>
</div>
</div>
</div>
Deberías eliminar frist col-xs-12
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3">
<h1>TEST</h1>
</div>
<div class="col-2">
<h1>TEST</h1>
</div>
<div class="col-3">
<h1>TEST</h1>
</div>
<div class="col-4">
<h1>TEST</h1>
</div>
</div>
Elimine el
col-12
ya que Bootstrap 4 requiere una nueva
row
para que las columnas se aniden.