Question

我有这段代码：

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

使用Twitter Bootstrapper的ClearFloat

1 个答案: