Bootstrap 3右对齐按钮

Question

我试图右键对齐网格中的按钮:

我想要右边的按钮与它上面的文本区域对齐.

我的代码看起来像这样:

<div class="row">
    <div class="col-xs-2">
        Purchase Order
    </div>
    <div class="col-xs-10">
        <textarea />
        <textarea />
        <div class="row">
            <div class="col-xs-9">
                <button />
                <button />
            </div>
            <div class="col-xs-2">
                <button />
            </div>
        </div>
    </div>
</div>

我已经尝试添加偏移量并调整不同列的跨度......按钮距离左侧或右侧太远.我试过在右边的按钮上添加一个固定的边距,这可以工作,但它打破了响应式设计.

---

注意:

我不能使用pull-right,它在Bootstrap 3中已弃用.

Answer 1

通常,Bootstrap有自己的类来向右拉元素.试试这个:

<button class="pull-right">Hello</button> 

Answer 2

这是内联样式.您也可以创建自己的.pull-right类.

HTML

<div class="row">
    <div class="col-xs-2">
        Purchase Order
    </div>
    <div class="col-xs-10">
        <textarea class="form-control"></textarea>
        <button style="float: right">Button Right</button>
        <button>Button One</button>
        <button>Button Two</button>
    </div>
  </div>

可选的CSS

.pull-right {
    float: right !important; // Use of important emulates bootstrap
}

Answer 3

你可以给text-left和text-right一试。它们内置于不需要浮动 div 的 Bootstrap 3 类中。

JS小提琴

<div class="row">
    <div class="col-xs-12">
        Purchase Order
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <textarea></textarea>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <textarea></textarea>
    </div>
</div>
<div class="row">
    <div class="col-xs-8 text-left">
        <button class="btn btn-primary">Save PO Tages & Notes</button>
        <button class="btn btn-default">Cancel</button>
    </div>
    <div class="col-xs-4 text-right">
        <button class="btn btn-primary">Add PO Notes to Calendar</button>
    </div>
</div>

注意 - 我稍微改变了你的 HTML 以使小提琴看起来更好。它们显然不是必需的。