ClearFloat與Twitter引導程序

Question

我有這樣的代碼：

http://jsfiddle.net/dtjmsy/8BDRj/

<div class="row-fluid"> 
    <div class="span2"> 
     <img src="http://autooccasion76.files.wordpress.com/2010/11/clio_rs1.gif" class="img-polaroid"> 
    </div> 
    <div class="span1"> 
     <span class="labelColorBlue">Statut:</span> 
    </div> 
    <div class="span2"> 
     <INPUT type="Text" value="Valeur" name="TxtBox">    
    </div> 

    <div class="clearfix"></div> 

    <div class="span2 offset2" style="background-color: blue">...</div> 

</div>​ 

我有一個形象，一個標籤，一個文本框和一個藍色的矩形，所有跨度2，我想要得到的是

將藍框放置在圖像左側，並在標籤和文本框下

我嘗試了clearfix或偏移類，它們都將我的藍色矩形放在圖像下，ho我是否可以將它放在標籤和文本框的高度以及圖片的右側，而不管它的高度如何？

乾杯

Answer 1

柵格被設計成垂直堆疊的行，且水平堆疊列。你必須根據這些原則來思考你的佈局。

如果我理解正確，你應該使用兩列：一個用於圖像，另一個用於其餘的。第二列將分爲兩行：標籤+輸入和藍色欄。

Demo (jsfiddle)

<div class="row-fluid"> 
    <div class="span2"> 
     <img src="..." class="img-polaroid"> 
    </div> 
    <div class="span3"> 
     <div class="row-fluid"> 
      <div class="span4"> 
       <span class="labelColorBlue">Statut:</span> 
      </div> 
      <div class="span8"> 
       <INPUT type="Text" value="Valeur" name="TxtBox" />    
      </div> 
     </div> 
     <div class="row-fluid"> 
      <div class="span12" style="background-color: blue">...</div> 
     </div> 
    </div> 
</div> 

小心輸入，因爲它有自己的寬度應該重寫，以適應在一列，像that (jsfiddle)：<INPUT class="span12" ... />

請記住，流體網格具有每創建一個後代（想想％），每列12列。如果您有疑問，請檢查fluid grid nesting doc。