css - secciones - ¿Filas anidadas con el sistema de rejilla bootstrap?

secciones bootstrap

Question

Quiero 1 imagen más grande con 4 imágenes más pequeñas en un formato 2x2 como este:

Mi pensamiento inicial fue alojar todo en una sola fila. Luego, cree dos columnas y, en la segunda columna, cree dos filas y dos columnas para crear el efecto 1x1 y 2x2.

Sin embargo, esto no parece posible, o simplemente no lo estoy haciendo correctamente?

Answer 1

Bootstrap versión 3.x

Como siempre, lea la gran documentación de Bootstrap:

3.x Docs : https://getbootstrap.com/docs/3.3/css/#grid-nesting

Asegúrese de que la fila del nivel primario esté dentro de un elemento .container . Siempre que desee anidar filas, simplemente abra una .row nueva dentro de su columna.

Aquí hay un diseño simple para trabajar desde:

<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="big-box">image</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"><div class="mini-box">1</div></div>
<div class="col-xs-6"><div class="mini-box">2</div></div>
<div class="col-xs-6"><div class="mini-box">3</div></div>
<div class="col-xs-6"><div class="mini-box">4</div></div>
</div>
</div>
</div>
</div>

Bootstrap versión 4.0

4.0 Docs : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Aquí hay una versión actualizada para 4.0, pero realmente debería leer toda la sección de documentos en la grilla para que entienda cómo aprovechar esta poderosa característica

<div class="container">
<div class="row">
<div class="col big-box">
image
</div>
<div class="col">
<div class="row">
<div class="col mini-box">1</div>
<div class="col mini-box">2</div>
</div>
<div class="row">
<div class="col mini-box">3</div>
<div class="col mini-box">4</div>
</div>
</div>
</div>
</div>

Demostración en Fiddle jsFiddle 3.x | jsFiddle 4.0

Que se verá así ( con un poco de estilo agregado ):

Answer 2

Agregando a lo que @KyleMit dijo:

• considere usar las clases col-md-* para el
• columnas externas y clases col-xs-* para el más pequeño
• columnas internas

Esto será útil cuando vea la página en diferentes tamaños de pantalla. En una pantalla pequeña usa:

• el embalaje de mayor
• las columnas externas pasarán mientras se mantiene el tamaño más pequeño
• columnas interiores si es posible