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>

我已经尝试添加偏移量并调整不同列的跨度……按钮太左或太右。我尝试在右侧按钮上添加一个固定的 margin-left，这可行，但它破坏了响应式设计。

---

笔记：

我不能使用 pull-right，它在 Bootstrap 3 中已被弃用。

原文由 Musical Shore 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是内联样式。您还可以创建自己的 .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
}

原文由 Mike Robinson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

通常 Bootstrap 有自己的类来将元素拉到右边。试试这个：

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

原文由 HoereeBauke 发布，翻译遵循 CC BY-SA 3.0 许可协议