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

“pull-right”类可能不是正确的方式，因为 in 使用“float:right”而不是 text-align。

检查 bootstrap 3 css 文件，我在第 457 行找到了“text-right”类。这个类应该是将文本向右对齐的正确方法。

一些代码：对于 Bootstrap 3 & 4

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

对于引导程序 5

<div class="row">
    <div class="col">
        <div class="text-end">
            <button type="button" class="btn btn-secondary">Default</button>
        </div>
    </div>
</div>

---

2019 年更新 - 引导 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，这会阻止 float-right 工作。在某些情况下，像 align-self-end 或 ml-auto 这样的实用程序类可以右对齐 flexbox 容器内的元素，如 Bootstrap 4 .row、Card 或 Nav。

另请记住，text-right 仍然适用于内联元素。

Bootstrap 4 align right examples

引导程序 3

使用 pull-right 类。

---

使用 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; }

---

除了已接受的答案之外，在从引导程序内置填充的容器和列中工作时，我有时会有一个完整的拉伸列，其中包含一个子 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>

---

很抱歉回答一个较旧的已经回答的问题，但我想我会指出你的 jsfiddle 不起作用的几个原因，以防其他人检查它并想知道为什么接受的答案中描述的 pull-right 类不不在那里工作。

bootstrap.css 文件的 url 无效。 （也许当你问这个问题时它起作用了）。您应该将属性： type="button" 添加到您的输入元素，否则它不会被呈现为按钮 - 它将被呈现为输入框。更好的是，改用 元素。此外，由于 pull-right 使用浮动，您会得到一些令人震惊的按钮布局，因为每个 LI 没有足够的高度来容纳按钮的高度。向 LI 添加一些 line-height 或 min-height 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>

（我还为按钮添加了最小宽度，因为由于宽度不同，我无法忍受按钮右对齐的参差不齐的外观:)）

---

使用 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>

---

在 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>

---

对于引导程序 5：

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

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

---

从 v3.1.0 开始，Pull right 已贬值。只是一个抬头。

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

---

为按钮应用 pull-right 类。 http://getbootstrap.com/css/#helper-classes-floats ->助手类

此链接将有所帮助

---

现在您需要将 .dropdown-menu-right 添加到现有的 .dropdown-menu 元素。 pull-right 不再受支持。

更多信息在这里http://getbootstrap.com/components/#btn-dropdowns

---

您可以在引导 CSS 之外尝试自定义 CSS 以查看是否有任何更改。尝试

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

如果它有效，那么您可以尝试操纵您拥有的内容或添加其他格式并实现您想要的。因为您正在使用引导程序并不意味着如果它不能为您提供您想要的东西，那么您只需管理它。你正在使用你的代码，所以你命令它按照你说的去做。干杯!

---

您还可以使用空白列在左侧留出空格

喜欢

<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

---

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

一种方法是将此样式应用于您的列表项，以使它们保持内联

或者

<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;
}

---

从 Bootstrap V3.3.1 开始，以下 CSS 样式将解决此问题

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

注意：我尝试了上面帖子中的所有建议，并且都解决了旧版本，并且不提供对 newset 引导版本的修复。

---

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

---

对于引导程序 5.1.3，属性 float-end 对我有用：

<div class="row mt-2 float-end">
    <div class="col-md-12">
        <button class="btn btn-warning" >Do something else</button>
        <button class="btn btn-primary ml-2">Do primary action</button>
    </div>
</div>

---

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

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

---

对于引导程序 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>

---