Question

我有一个使用Bootstrap框架的Web表单。

我想正确对齐＆＃34; Save＆＃34; ＆安培; ＆＃34;取消＆＃34;在全尺寸屏幕上显示表单时按钮。

使用Bootstrap 3 css执行此操作的正确方法是什么？

 <div class="row">
        <div class="col-md-9">
            <input type="reset" value="Cancel" class="btn btn-default btn-danger" />
        </div><div class="col-md-3">
            <input type="submit" value="Save" class="btn btn-default btn-success" />
        </div>
    </div>

Answer 1

<div class="row">
    <div class="col-md-9">
        <input type="reset" value="Cancel" class="btn btn-default btn-danger pull-right" />
    </div><div class="col-md-3">
        <input type="submit" value="Save" class="btn btn-default btn-success pull-right" />
    </div>
</div>

您需要添加pull-right助手类。

文档：http://getbootstrap.com/css/#helper-classes-floats

Answer 2

我们试试这个：

 <div class="row">
        <div class="col-md-9">
            <input type="reset" value="Cancel" class="btn btn-default btn-danger pull-right" />
        </div><div class="col-md-3">
            <input type="submit" value="Save" class="btn btn-default btn-success pull-right" />
        </div>
    </div>

只需将pull-right放入类中即可使其正确对齐。请注意，如果您想重新订购按钮，只需将最右侧放在上面一行。

Answer 3

尝试使用Bootstrap的一个辅助类来浮动对象。你可以使用 .pull-left 为 float：left; 或 .pull-right 用于 float：right;

这应该在右侧和右边的衬垫上正确对齐按钮。

来源：Bootstrap Documentation

Answer 4

尝试一下：

<div class="modal-footer">
    <button type="button" class="btn btn-danger">Cancel</button>
    <button type="submit" class="btn btn-success">Save</button>
</div>

在基于引导程序的Web表单上右键对齐按钮的正确方法？

4 个答案: