Varias filas dentro de una fila con Bootstrap 4

Solución:

Bootstrap tiene un sistema de canalones inteligente (pero delicado) que proporciona (margins + paddings) para contenido en todos los dispositivos ¹.

Este sistema se basa en dos supuestos simples:

• las columnas son hijos inmediatos de .rows ²
• el contenido se coloca dentro de las columnas

Por eso, si quieres colocar un .row dentro de otro .row (para dividir aún más uno de sus cols), tendría que usar este marcado:

<div class="row">
  <div class="col-12">
     <div class="row">
        <div class="col-md-4 offset-md-2">
           Grid perhaps
        </div>
        <div class="col-md-4">
           More grid
        </div>
     </div>
  </div>
</div>

Lo anterior no tiene mucho sentido por sí solo (podría usar el marcado de la fila secundaria y obtendría el mismo resultado). Pero es útil cuando desea compensar (o limitar) un área completa de un diseño, como este:

<div class="row">
  <div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0">
     <div class="row">
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
     </div>
  </div>
</div>

Vea este violín para ver un ejemplo en vivo.

---

¹ Para deshacerse de las canaletas de Bootstrap (en v4), se necesitaría aplicar no-gutters clase en .row.

² Esto es un “principio general”, No un “regla estricta”. Otros elementos están permitidos (e incluso recomendados) como hijos directos de .rows (como saltos de columna). En el otro extremo, otros elementos se extienden desde .rows (como .form-rows), heredando así el sistema de canaletas y siendo padres de columna válidos.

• .row no debería ser el inmediato hijo de otro .row
• .col* no debería ser el inmediato hijo de otro .col*

De los documentos de Bootstrap:

“El contenido debe colocarse dentro de las columnas y solo las columnas pueden ser elementos secundarios inmediatos de las filas”.

No entiendo por qué cree que necesita una fila en una fila, y qué hay de malo en usar su diseño sin el anidado row. Te das cuenta de que col-12 es el ancho de una fila completa?

<div class="container-fluid">
    <div class="row">
        <div class="col-12 text-center">
            <h1>Some title</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">

        </div>
        <div class="col-md-4">
            Grid perhaps
        </div>
        <div class="col-md-4">
            More grid
        </div>
        <div class="col-md-2">

        </div>
    </div>
</div>

http://www.codeply.com/go/jfrWn4QDf1

Bootstrap 4, se aplica la misma regla:

“Las filas son envoltorios para las columnas. Cada columna tiene un relleno horizontal (llamado medianil) para controlar el espacio entre ellas … En un diseño de cuadrícula, el contenido debe colocarse dentro de las columnas y solo las columnas pueden ser hijos inmediatos de las filas” __ Bootstrap 4.1 Docs

---

Vinculado: ¿Las columnas deben ser hijos inmediatos de las filas?

---

---

Utiliza Nuestro Buscador