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

---

在Bootstrap 3中，它并没有被弃用。如果你没有它，只需创建一个名为.pull-right的类，并添加一条规则，即“float: right !important;”。 - Mike Robinson

无论如何，使用浮点数并不能解决问题。按钮要么太靠左边，要么太靠右边。 - Musical Shore

Answer 1

通常Bootstrap有自己的类来将元素向右移动。尝试这样做：

一般情况下，Bootstrap会提供一个用于将元素向右对齐的类。请尝试使用以下代码：

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

- HoereeBauke

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
}

- Mike Robinson

---

不是说这样做是错误的，但内联样式通常是不好的实践。特别是在使用框架（如Bootstrap）时。不过我仍然不确定为什么OP没有访问“pull-right”。 - Tricky12

Answer 3

您可以尝试使用 text-left 和 text-right。它们是 Bootstrap 3 内置的类，不需要使用浮动的 div 元素。

JS Fiddle

<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，以使示例看起来更好。显然这些不是必需的。

- Tricky12

Answer 4

我遇到了同样的问题，我找到了这个解决方案

<div style="float: right; margin-top: 30px;" class="col-12">
    <button type="submit" class="btn btn-primary">Entrar</button>
</div>

- Danilo Sampaio

Answer 5

在：

<div class="row">
    <div class="col-xs-9">
        <button />
        <button />
    </div>
    <div class="col-xs-2">
        <button />
    </div>
</div>

...你有col-xs-9和col-cs-2，它们不符合12列的Bootstrap网格系统。也许将col-xs-9更改为col-xs-10可以解决你的问题？或者使用pull-right类。

- Marek Kus

---

不，正如我在原帖中所说的那样，更改列并不能解决问题。无论如何，您也不需要所有列来布局网格。 - Musical Shore