¿Cómo puedo obtener una columna Bootstrap para abarcar varias filas?

158

Estoy tratando de descubrir cómo hacer la siguiente cuadrícula con Bootstrap.

No estoy seguro de cómo crearía el cuadro (número 1) que abarca dos filas. Los cuadros se generan mediante programación en el orden en que se presentan. El cuadro 1 es un mensaje de bienvenida.

ingrese la descripción de la imagen aquí

¿Alguna idea sobre la mejor manera de ir con esto?

css  twitter-bootstrap 
— James Jeffery
fuente
1
twitter.github.io/bootstrap/scaffolding.html#gridSystem , puede anidar el sistema de red Bootstrap.
— TheHippo
1
Entonces, ¿cree 2 filas, en lugar de 3, anidando las 2 filas dentro de la primera fila? Esto podría ser problemático cuando las cajas se generan mediante programación.
— James Jeffery
1
No tengo idea de si funcionaría, pero ¿agregaría la pull-leftclase a todas las cajas funcionaría? no hará que la casilla 1 tenga la misma altura que 2 + 4, pero debería permitir que funcione cuando establezca la altura.
— Hailwood
Hailwood, ponlo como respuesta si puedes, si no, pegaré mi código. Funcionó ... al menos en Chrome. Necesito probarlo en otros navegadores.
— James Jeffery
@Hailwood de hecho, no es necesario tirar a la izquierda. Solo establecer una altura en el primer elemento funciona.
— James Jeffery

Respuestas:

164

Para Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>
Expandir fragmento

Para Bootstrap 2:

Mostrar fragmento de código

Vea la demostración en JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

— Mastergalen
fuente
¿Cómo haría que las casillas cuatro y cinco llenen la altura de la fila a medida que crece la casilla uno?
— Imran NZ
2
— Mastergalen
Este ejemplo no funciona del todo, el borde inferior de la primera columna está ligeramente desalineado con el resto.
— JackKalish
Esta es una gran respuesta, pero ¿y si el recuadro 5 necesitara extenderse también a la fila 3, y más aún, dinámicamente?
— Misha'el
@ Misha'el Eso es bastante simple, solo haz lo que hizo para el cuadro 1 y aplícalo al cuadro 3/5. Debería haber 3 columnas de igual tamaño, la de afuera debería contener solo 1 fila, la de adentro de las dos filas.
— Nathan Williams
17

Como sugieren los comentarios, la solución es usar tramos / filas anidadas.

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>
— disrvptor
fuente
1

El siguiente ejemplo parecía funcionar. Simplemente estableciendo una altura en el primer elemento

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

Sin embargo, no puedo evitar pensar que es el uso incorrecto de una fila.

— James Jeffery
fuente
1

Creo que la parte sobre cómo abarcar filas se ha respondido a fondo (es decir, al anidar filas), pero también me encontré con el problema de que mis filas anidadas no llenan su contenedor. Si bien flexbox y los márgenes negativos son una opción, una solución mucho más fácil es usar la h-50clase predefinida en los rowcuadros que contienen 2, 3, 4 y 5.

Nota: estoy usando Bootstrap-4, solo quería compartir porque me encontré con el mismo problema y encontré que era una solución más elegante :)

— Shareef Hadid
fuente
0 
<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>
— Ps Naidu
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.