Varias filas dentro de una fila con Bootstrap 4

Estoy intentando crear una página de ancho completo usando Bootstrap. Tengo una configuración similar a esta:

 
The first row goes here
The second row goes here
The third row goes here

Si quisiera crear una fila dentro de una fila, ¿cómo haría eso? Esto es lo que estoy tratando de lograr:

  

Some title

Grid perhaps
More grid

Así que, básicamente, quiero poner el título en una fila y algunas cuadrículas en otra fila. La parte difícil aquí es, quiero colocar algunas columnas que tienen 4 columnas de ancho en el medio, y luego tener “2 columnas de relleno” a la izquierda y derecha.

Mi pregunta puede sonar como las demás, pero es única por el relleno. ¿Cómo hago este diseño correctamente?

Bootstrap tiene un sistema de canaletas inteligente (pero delicado) que proporciona “natural” ( margin s + padding s) para el contenido en todos los dispositivos 1 .

Este sistema se basa en dos suposiciones simples:

  • las columnas son hijos inmediatos de .row s 2
  • 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 tus cols), deberías usar este marcado:

 
Grid perhaps
More grid

Lo anterior no tiene mucho sentido por sí mismo (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 esta:

 
Grid
More grid
Grid
More grid
Grid
More grid
Grid
More grid
Grid
More grid

Vea este violín para un ejemplo en vivo.


1 Para deshacerse de las cunetas de Bootstrap (en v4), uno debería aplicar la clase no-gutters .row en .row .

2 Este es un “principio general” , no una “regla estricta” . Se permiten (e incluso se recomiendan) otros elementos como hijos directos de .row s (como saltos de columna ). En el otro extremo, otros elementos se extienden desde .row s (como .form-row s), heredando así el sistema de canaletas y siendo padres de columna válidos.

A .row no debería ser el hijo .row de otro .row . De los documentos de Bootstrap:

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

No entiendo por qué piensas que necesitas una fila en una fila, y qué hay de malo con solo usar tu diseño sin la row anidada. ¿Te das cuenta de que col-12 es el ancho de una fila completa?

 

Some title

Grid perhaps
More grid

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

Bootstrap 4, se aplica la misma regla:

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