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。