javascript - Bootstrap 自定义布局

标签 javascript jquery html css twitter-bootstrap

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

enter image description here

我如何更新下面的代码以实现相同的目的(基本上是将“编辑”按钮与标签“注释”右对齐);

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

最佳答案

您只需要添加在 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

关于javascript - Bootstrap 自定义布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24777630/

相关文章:

html - 下拉列表中的第一个选项在 IE9 中显示为空白

javascript - 在渲染任何组件后有一个 useEffect 钩子(Hook)

javascript - 使用 Python Flask 将数据注入(inject) javascript

javascript - setInterval() 对象的方法调用

javascript - 基于attr的jquery改变选择器

html - flex column wrap时,如何让第二列不占满第一列的高度?

javascript - HTML 属性的正则表达式多重匹配

javascript - Backbone : Make collection from slice of another collection

jquery - 带有下拉选择的 AngularJS

html - hotmail 电子邮件通讯中带图像的行之间的空间