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。它们构建在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，使小提琴看起来更好。显然它们不是必需的。

Answer 4

在：

<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 whitch不要添加到12列bootstrap网格系统。 Mayby 将col-xs-9 更改为 col-xs-10 将解决您的问题？或者这个和右拉班。

Answer 5

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

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

Bootstrap 3右对齐按钮

注意：

5 个答案: