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

No estoy seguro de cómo me gustaría crear la caja (número 1) que se extiende en dos filas. Las cajas son generados mediante programación en el orden en que están establecidos. Cuadro 1 es un mensaje de bienvenida.

¿Cómo puedo obtener un Bootstrap de la columna que abarcan varias filas?

Alguna idea sobre el mejor camino a seguir con esto?

  • twitter.github.io/bootstrap/andamios.html#gridSystem, puede anidar el Bootstrap gridsystem.
  • Por lo tanto, crear 2 filas, en lugar de 3, la anidación de las 2 filas dentro de la primera fila? Esto podría ser problemático cuando las cajas se generan a través de programación.
  • Ni idea de si iba a funcionar, pero la adición de la pull-left clase a todos los cuadros de trabajo? no hará el cuadro 1 de la misma altura como 2 + 4, pero se debe permitir que funcione cuando se establece la altura.
  • Hailwood, puesto que, como respuesta, si usted puede, si no que me voy a pegar mi código. Funcionó … al menos en Chrome. Necesidad de probar en otros navegadores.
  • de hecho, no tire de la izquierda es necesaria. Sólo la creación de una altura sobre el primer elemento de obras.

5 Comentarios

  1. 153

    Para Bootstrap 3:

    HTML:

    <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>

    Para El Bootstrap 2:

    HTML:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
    
    <div class="row-fluid">
        <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>
        <div class="span8">
            <div class="row-fluid">
                <div class="span6"><div class="well">2</div></div>
                <div class="span6"><div class="well">3</div></div>
            </div>
            <div class="row-fluid">
                <div class="span6"><div class="well">4</div></div>
                <div class="span6"><div class="well">5</div></div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span4">
            <div class="well">6</div>
        </div>
        <div class="span4">
            <div class="well">7</div>
        </div>
        <div class="span4">
            <div class="well">8</div>
        </div>
    </div>

    Ver la demo en JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

    • Cómo haría usted en cajas de cuatro y cinco llenar el alto de la fila de la casilla uno crece?
    • stackoverflow.com/questions/19695784/…
    • Este es el ejemplo de no acaba de funcionar, la primera columna del borde inferior es ligeramente desalineados con el resto.
    • Esta es una gran respuesta, pero ¿y si el cuadro 5 se necesita para extender en la fila 3 así, y más aún, de forma dinámica?
    • Eso es bastante sencillo, basta con hacer lo que él hizo por cuadro 1 y aplicarlo a la caja de 3/5. No debe ser de 3 columnas de igual tamaño, uno en la parte de afuera contendría sólo 1 fila, uno en el interior de las dos filas.
    • cómo podríamos obtener de 1 a ser de la misma altura como 2 & 4 sin necesidad de utilizar saltos de línea – por ejemplo, si queremos que sea una imagen o imágenes de rotación?

  2. 17

    Como los comentarios sugieren que, la solución es utilizar anidada abarca/filas.

    <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>
  3. 1

    El ejemplo de abajo, parecía funcionar. Sólo la creación de una altura sobre 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>

    No puedo ayudar, pero el pensamiento es el mal uso de una fila sin embargo.

  4. 1

    Creo que la parte sobre cómo span filas ha sido contestadas de manera correcta (es decir, mediante la anidación de las filas), pero también se topó con el problema de mi anidada filas no llenar su contenedor. Mientras flexbox y márgenes negativos son una opción, mucho más fácil la solución es el uso de la predefinidos h-50 de la clase en el row que contiene los cuadros 2, 3, 4, y 5.

    Nota:
    Estoy usando Bootstrap-4, sólo quería compartir porque me encontré con
    el mismo problema y encontró que se trata de una solución más elegante 🙂

  5. 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>

Dejar respuesta

Please enter your comment!
Please enter your name here