İpuçları

Question

Ben Heyecan Bootstrap ile bu düzeni (sadece kutu) yapmaya çalışıyorum: Temelde

, bir gömülü youtube videosu ve iki eşit boyutlu kutuları etmektir bu doğru. En ızgara tabanlı sistemler gibi

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

Answer 1

.span* bloklarını .row-fluid kapsayıcısına istifleyebilirsiniz, daha sonra aradığınız efekti oluşturmak için başka bir span* bloğunun içine yerleştirebilirsiniz. Örneğin bu deneyin:

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> 

Not I onları yığını bir başka .span* blok t içinde .row-fluid kap içinde ihtiva edilen her bir üst üste iki yan bloklar bir iç içe kadar.

Şimdi biraz CSS ile biz bir sütun oluşturmak için ana bloğun genişliğine yığılmış .span* blok uzatabilirsiniz:

CSS

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

Demo: http://jsfiddle.net/k27S5/show/

HAML hakkında pek bir şey bilmiyorum ama belgelere bir göz attıktan sonra kurulum şu şekilde görünmelidir:

HAML

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

Answer 2

, satırlarda tarafından değil DEĞİL sütunlara göre şeyler ortaya koymak yardımcı olacaktır twitter bootstrap kullanılan: biri

bunu şimdi (haml) var.

Soldaki büyük kutunun, sağdaki iki kutuyla aynı yükseklikte olmasını istediğinizi varsayıyorum. Eğer durum böyle ise, bunu yapmanın en kolay yolu tablolarla. Evet, insanlar masalara kötü bir rap veriyor ama bazı düzenler için en basit çözüm. Sonra

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

stil buna göre

Answer 3

Eğer sabit genişlikli düzeni kullanıyorsanız:

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

Bu 'teşekkür varsayar: Eğer akış düzenini kullanıyorsanız

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

Yine de Bootstrap tarafından ele alınmayacak olan iki kolonun yüksekliklerini eşleştirmekle ilgili endişe duymuyorum.