Bootstrap自定义布局

时间:2014-07-16 09:50:33

标签: javascript jquery html css twitter-bootstrap

我正在使用Bootstrap 2.3.2并希望实现如下布局;

enter image description here

如何更新下面的代码以达到相同的效果(基本上将Edit按钮与标签Notes对齐);

<div class="control-group">
    <div class="row-fluid">
        <div><label for="Notes" class="control-label" style="text-align:left">Notes</label></div>
        <div><button class='btn btn-small editNotes globalNotes' src='' title='Edit notes'><i class="icon-edit"></i> Edit</button></div>
    </div>
    <div style="clear:both;">
        <div class="thumbnail clearfix" style="width:455px; height: 190px; overflow: auto">
            <span id="notesPanel"><pre id="notesTxt" style="border:none; background: none; display:inline;">new</pre></span>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

您只需要添加bootstrap中定义的类,即pull-leftpull-right

<label for="Notes" class="control-label pull-left">Notes</label>  
<button class='btn btn-small editNotes globalNotes pull-right' src='' title='Edit notes'><i class="icon-edit"></i> Edit</button>  

JSFIDDLE DEMO

相关问题