如何让我的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-right插入到class属性中，然后让bootstrap排列按钮。

对于 Bootstrap 2.3 ，请参阅：http://getbootstrap.com/2.3.2/components.html#misc＆gt;辅助班级＆gt; .pull右

对于 Bootstrap 3 ，请参阅：https://getbootstrap.com/docs/3.3/css/#helper-classes＆gt;助手班。

---

对于 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

＆＃34;右拉＆＃34; class可能不是正确的方法，因为在使用中＆＃34; float：right＆＃34;而不是text-align。

检查我发现的bootstrap 3 css文件＆＃34; text-right＆＃34;第457行上的类。这个类应该是将文本对齐的正确方法。

一些代码：

<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类现在在Bootstrap 4中 float-right ...

    <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，可以防止浮动权利工作。在某些情况下，像align-self-end或ml-auto这样的util类可以正确对齐Flexbox容器内部的元素，如Bootstrap 4 .row，Card或Nav。

还要记住，text-right仍适用于内联元素。

Bootstrap 4 align right examples

Bootstrap 3

使用pull-right类。

Answer 5

使用button标记代替input并使用pull-right类。

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

<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 =＆＃34; button＆＃34;输入元素，或者它不会被渲染为按钮 - 它将被渲染为输入框。更好的是，改为使用<button>元素。
3. 此外，因为右拉使用浮动，你会得到一些交错的按钮布局，因为每个LI没有足够的高度来容纳按钮的高度。将一些行高或最小高度的css添加到LI将解决这个问题。

工作小提琴：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

使用Bootstrap pull-right帮助程序对我们不起作用，因为它使用float: right，forces inline-block elements to become block。当.btn成为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

为该按钮应用pull-right课程。 http://getbootstrap.com/css/#helper-classes-floats - ＆gt;助手班

此链接有助于

Answer 10

从v3.1.0开始，右拉是折旧的。 只是一个抬头。

http://getbootstrap.com/components/#callout-dropdown-pull-right

Answer 11

对于 Bootstrap 5：

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

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

Answer 12

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

我刚刚使用了layout ..apply样式的li ..

或

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

CSS中的

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

Answer 13

您还可以使用空白列在左侧提供空格

喜欢

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

演示:: Jsfiddle demo

Answer 14

现在您需要将.dropdown-menu-right添加到现有的.dropdown-menu元素中。不再支持pull-right。更多信息http://getbootstrap.com/components/#btn-dropdowns

Answer 15

你可以尝试一下自定义CSS，除了bootstrap CSS，看看是否有任何变化。尝试

.move-rigth{
    display: block;
    float: right;
}

如果它有效，那么你可以尝试操纵你拥有的东西或者为此添加其他格式并实现你想要的。因为你使用bootstrap并不意味着如果它没有为你提供你想要的东西那么你就可以管理它。您正在使用您的代码，因此您可以命令它按照您的说法进行操作。 干杯！

Answer 16

在 Bootstrap V3.3.1 中，以下CSS样式将解决此问题

.modal-open{
    padding-right: 0 !important;
}

注意：我尝试了以上帖子中的所有建议，并且都解决了较旧的版本，并且未提供对新设置的引导程序版本的修复。

Answer 17

在 Bootstrap 4 中：通过Flexbox尝试这种方式。请参阅getbootstrap

中的文档

video          === 115.5 Mb
restr          ===   4.3 Mb
my.pdf         ===   1.3 Mb
...
small.gif      ===   0.01 Mb

Answer 18

问题在于您将按钮用作列表的一部分。并且因为列表项之间的垂直边距太低而无法将按钮放在中间，它会弄乱对齐方式。我会将其中一个按钮放在列表顶部，另一个放在它们下方，这样它就会看起来像您期望的那样！

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

Answer 19

<p align="right">
<button type="button" class="btn btn-primary">Submit</button>
</p>

Answer 20

for bootstrap 4 documentation

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>