表单的Twitter-bootstrap布局

Question

我正在尝试使用Twitter Bootstrap（v2.3.2）设计UI表单。

我的布局目前如下所示

我的代码看起来像

<div class="span5">
        <div class="control-group">
            <label class="control-label" for="recruitmentNotes">Field Label</label>
            <div style="padding-left:150px">
                <div style="width:300px; height: 200px; overflow: auto" class="thumbnail clearfix">
                    <span id="mySpan"><pre style="border:none; background: none; display:inline;" id="recNotesTxt">some notes</pre></span>
                </div>
                <button data-rec-notes="global notes" title="Edit notes" src="" class="icon-edit edit"></button>
            </div>
        </div>
    </div>

但是我希望布局看起来像；

如何固定版面？

Answer 1

那是你要的吗？ http://jsfiddle.net/9HwjF/

我只需在标签上添加“ clear：right ”和跨度

<div class="span5">
    <div class="control-group">
        <label style="padding-left:150px; clear:right" class="control-label" for="recruitmentNotes">Field Label</label>
        <div style="padding-left:150px">
            <div style="width:300px; height: 200px; overflow: auto" class="thumbnail clearfix"> <span id="mySpan"><pre style="border:none; background: none; display:inline;" id="recNotesTxt">some notes</pre></span>

            </div>
            <button data-rec-notes="global notes" title="Edit notes" src="" class="icon-edit edit"></button>
        </div>
    </div>
</div>

---

或者，您也可以使用padding-left在div内移动标签，然后像前面的解决方案一样，添加“ clear：right ”

http://jsfiddle.net/mf5vN/

<div class="span5">
    <div class="control-group">
        <div style="padding-left:150px">
            <label style="clear:right" class="control-label" for="recruitmentNotes">Field Label</label>
            <div style="width:300px; height: 200px; overflow: auto" class="thumbnail clearfix"> <span id="mySpan"><pre style="border:none; background: none; display:inline;" id="recNotesTxt">some notes</pre></span>

            </div>
            <button data-rec-notes="global notes" title="Edit notes" src="" class="icon-edit edit"></button>
        </div>
    </div>
</div>

Answer 2

将此样式添加到Div的Label元素之后...

clear:both;