css - 带有 Twitter Bootstrap 的 ClearFloat

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

我有一张图片，一个标签一个文本框和一个蓝色矩形，都是span2，我想要得到的是

蓝框放在图片左边，标签和文本框下面

我尝试了 clearfix 或 offset 类，它们都将我的蓝色矩形放在图像下方，我怎样才能将它放置在标签和文本框高度的正下方以及图片的右侧，无论其高度如何？

干杯

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如果您有疑问。