Twitter-bootstrap Layout for form

Question

I am trying to design UI form using Twitter Bootstrap (v2.3.2).

My layout currently looks like below

and my code looks like

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

However I want the layout to look something like;

How do I fix the layout ?

Answer 1

Is that what you want? http://jsfiddle.net/9HwjF/

I simply add the " clear:right " and the span to the label

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

---

or you can move the label inside the div with padding-left and, like the previous solution, add the " 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;