html - bootstrap 3 a bootstrap 4 cols ya no están alineados horizontalmente

css bootstrap-4

Question

Esta pregunta ya tiene una respuesta aquí:

• El diseño del sistema de cuadrícula Bootstrap 4.0 no funciona 1 respuesta

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>

https://jsfiddle.net/aq9Laaew/4791/

Answer 1

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>

Answer 2

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>

Answer 3

Elimine el col-12 ya que Bootstrap 4 requiere una nueva row para que las columnas se aniden.

DOCS