如何让我的Twitter Bootstrap按钮右对齐？

Question

我在这里有一个简单的演示:

http://jsfiddle.net/HdeZ3/1/

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

我有一个无序列表,对于每个列表项,我希望左边有文本,然后是右对齐按钮.我试图使用右拉,但这完全弄乱了对齐.我究竟做错了什么？

Answer 1

插入pull-rightclass属性并让bootstrap排列按钮.

对于Bootstrap 2.3,请参阅:http://getbootstrap.com/2.3.2/components.html#misc>帮助程序类> .pull-right.

有关Bootstrap 3,请参阅:https://getbootstrap.com/docs/3.3/css/#helper-classes >帮助程序类.

对于Bootstrap 4,请参阅:https://getbootstrap.com/docs/4.0/utilities/float/#responsive

该pull-right命令已被删除并替换为float-right或通常为float-{sm,md,lg,xl}-{left,right,none}

Answer 2

在twitter bootstrap 3中尝试类拉右

class="btn pull-right"

Answer 3

"pull-right"类可能不是正确的方法,因为在使用"float:right"而不是text-align.

检查bootstrap 3 css文件我在第457行找到了"text-right"类.这个类应该是正确对齐文本的正确方法.

一些代码:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

Answer 4

更新2018 - Bootstrap 4.0.0

该pull-right课程现在float-right在Bootstrap 4 ...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

最好不要对齐ul列表并对行使用块元素.

是float-right仍然没有工作？

请记住,Bootstrap 4现在是flexbox,并且许多元素display:flex可以阻止浮动权限的工作.在某些情况下,util类喜欢align-self-end或ml-auto正确地对齐Flexbox容器内部的元素,如Bootstrap 4 .row,Card或Nav.

还记得它text-right仍适用于内联元素.

Bootstrap 4对齐右边的例子

Bootstrap 3

使用该pull-right课程.

Answer 5

使用buttontag而不是input使用pull-rightclass.

pull-right class完全弄乱了你的两个按钮,但你可以通过在右侧定义自定义边距来解决这个问题.

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

然后使用以下CSS作为类

.RbtnMargin { margin-left: 5px; }

Answer 6

添加到接受的答案,当在从引导程序中内置填充的容器和列中工作时,我有时会有一个带有子div的完全拉伸列,可以实现拉动.

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

或者,将所有列添加到网格列的总数(默认为12),同时使第一列偏移.

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

Answer 7

很抱歉回复一个较旧的已回答的问题,但我想我会指出你的jsfiddle不起作用的几个原因,以防其他人检查出来并想知道为什么接受的答案中描述的右拉类没有在那里工作.

1. bootstrap.css文件的url无效.(当你问这个问题时,它可能有用).
2. 你应该在输入元素中添加属性:type ="button",否则它将不会呈现为按钮 - 它将呈现为输入框.更好的是,使用<button>元素代替.
3. 另外,因为pull-right使用浮动,你会得到一些交错的按钮布局,因为每个LI没有足够的高度来容纳按钮的高度.向LI添加一些行高或最小高度的css将解决这个问题.

工作小提琴:http://jsfiddle.net/3ejqufp6/

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"/></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>

(我还在按钮上添加了一个最小宽度,因为我不能忍受看起来粗糙的右对齐按钮,因为宽度不同:))

Answer 8

使用引导pull-right助手并没有为我们工作,因为它使用float: right,这迫使inline-block元素成为block.当.btns成为时block,它们就失去了inline-block将它们作为准文本元素的自然边缘.

因此我们direction: rtl;在父元素上使用,这导致该元素内的文本从右到左布局,这也导致inline-block元素从右到左布局.您可以使用以下LESS来防止儿童被布置rtl:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

并使用它像:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

Answer 9

对于引导程序 5：

文档： https: //getbootstrap.com/docs/5.0/utilities/float/

.float-end在元素中使用以进行右对齐。.clearfix如果您将按钮向右移动并且不希望以下元素向上滑动，则可能需要添加父元素。

Answer 10

在Bootstrap 4 中：用 Flexbox 试试这种方式。请参阅getbootstrap 中的文档

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>