¿Filas anidadas con sistema de cuadrícula de arranque?

196

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

Figura 1 Ejemplo

Mi pensamiento inicial fue alojar todo en una 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 ser posible, o simplemente no lo estoy haciendo correctamente.

css html twitter-bootstrap grid grid-system Greg
fuente
Publique el HTML / CSS que ha probado hasta ahora.
Steve Sanders
Pruebe esto: jsfiddle.net/KXje2/9 Edité mi violín para acomodar pantallas grandes a través de pantallas extra pequeñas.
BuddhistBeast
¿Te funcionó el código anterior? ...
BuddhistBeast

Respuestas:

299

Bootstrap versión 3.x

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

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

Asegúrese de que la fila de nivel primario esté dentro de un .containerelemento. Siempre que desee anidar filas, simplemente abra un nuevo .rowinterior de su columna.

Aquí hay un diseño simple para trabajar:

<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 Documentos : 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 cuadrícula 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 ):

captura de pantalla

KyleMit
fuente
1
lamento secuestrar un hilo de 1 año, pero ¿sabes cómo obtener 0px entre la imagen y 1 y 3
alex
2
@alex, claro, solo establece margin: 0;el .mini-boxelemento. Mi ejemplo fue solo agregar uno para mayor claridad, pero puede eliminar la línea por completo. Aquí hay una demostración
KyleMit
44
¿Por qué no hay una fila entre col para minibox 2 y col para minibox 3? ¿Y qué pasará si hay?
pashute
44
@pashute, vea la cuadrícula Bootstrap 3, ¿ realmente importa cuántas columnas hay en una fila? . Cada mini caja ocupa el 50% del espacio disponible (restringido por la columna), por lo que dos ocuparán la primera fila. Cualquier extra se ajustará a una nueva línea. También puede emparejar cada uno de ellos en filas, pero no es necesario. Bootstrap se ajusta de forma predeterminada para que no tenga que saturar su marcado con nuevas filas. Si es semánticamente significativo, diría que lo hagas. Pero si solo está mostrando una lista de 4 objetos, manténgalos en la misma fila.
KyleMit
1
@ user3921890, ese es un tema demasiado grande para responder en una línea de comentarios. ¿Puede publicar un nuevo hilo explicando lo que está tratando de hacer y al menos un intento de hacerlo, y luego vincularlo aquí.
KyleMit
6

Además de lo que dijo @KyleMit, considere usar:

  • col-md-* clases para las columnas externas más grandes
  • col-xs-* clases para las columnas internas más pequeñas

Esto será útil cuando vea la página en diferentes tamaños de pantalla.

En una pantalla pequeña, la envoltura de columnas externas más grandes sucederá mientras se mantienen las columnas internas más pequeñas, si es posible

ezzadeen
fuente