Consejos sobre la codificación de esta disposición con Twitter Bootstrap

Question

Estoy tratando de hacer este diseño con Twitter Bootstrap (sólo las casillas):

Básicamente, se trata de un vídeo de YouTube insertados y dos cajas de tamaño igual es lo correcto.

tengo unas pocas cosas en este momento (haml):

.row 
    .span8 
    /embedded code 
    .span4 
    /I need to put two boxes here... how? 

Answer 1

Puede apilar los bloques .span* dentro de un contenedor .row-fluid que luego puede anidar dentro de otro bloque span* para crear el efecto que está buscando. Prueba esto, por ejemplo:

HTML

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span9"> 
      <div class="big box"> 
       box 
      </div> 
     </div> 
     <div class="span3"> 
      <div class="row-fluid"> 
       <div class="span3"> 
        <div class="box"> 
         box 
        </div> 
       </div> 
       <div class="span3"> 
        <div class="box"> 
         box 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Observe cómo he anidado los dos bloques laterales una encima de la otra contenida dentro de un recipiente .row-fluid dentro de un bloque de otra .span* t amontonarlos.

Ahora, con un poco de CSS que podemos estirar las apilados .span* bloques a la anchura del bloque padre para crear una columna:

CSS

.row-fluid [class*="span"] .row-fluid [class*="span"] { 
    margin-left: 0; 
    width: 100%; 
} 

Demostración: http://jsfiddle.net/k27S5/show/

No sé mucho sobre HAML, pero después de echar un vistazo a la documentación, la configuración debería verse más o menos así:

HAML

.container-fluid 
    .row-fluid 
    .span9 
     content 
    .span3 
     .row-fluid 
     .span3 
      content 
     .span3 
      content 

Answer 2

Como la mayoría de los sistemas basados ​​en la red, la utilizada en arranque Twitter le ayudará a sentar las cosas por filas, pero no por columnas.

Supongo que quiere que la gran caja de la izquierda tenga la misma altura que las dos cajas de la derecha. Si ese es el caso, la manera más fácil de hacerlo es con tablas. Sí, la gente le da mala reputación a las tablas, pero para ciertos diseños es la solución más simple.

<table> 
    <tr> 
    <td>big box on left</td> 
    <td> 
     <div>small top box on right</div> 
     <div>small bottom box on right</div> 
    </td> 
    </tr> 
</table> 

A continuación, el estilo en consecuencia

Answer 3

Si está utilizando el diseño de ancho fijo:

.row 
    .span8 
    .span4 
    .row 
    .span4 
    .row 
    .span4 

Si está utilizando el diseño de fluidos:

.row-fluid 
    .span8 
    .span4 
    .row-fluid 
     .span12 
    .row-fluid 
     .span12 

Esto le supone' No estamos preocupados por igualar las alturas de las dos columnas, que Bootstrap no manejaría de todos modos.