如何使我的Twitter Bootstrap按钮正确对齐？

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

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>

我有一个无序列表，对于每个列表项，我希望左侧有一个文本，然后有一个右对齐的按钮。我尝试使用向右拉，但这完全弄乱了对齐方式。我究竟做错了什么？

插入pull-right到class属性中，让引导程序安排按钮。

对于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 > Helper类。

对于Bootstrap 4，请参阅：https : //getbootstrap.com/docs/4.0/utilities/float/#sensitive

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

在twitter bootstrap 3中尝试向右拉类

class="btn pull-right"

“ pull-right”类可能不是正确的方法，因为in使用“ 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>

更新2019-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对齐示例

引导程序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无法正常工作的几个原因，以防其他人检查出来并想知道为什么接受的答案中所描述的右上角类没有用在那儿不工作。

1. bootstrap.css文件的网址无效。（当您提出问题时，它可能会起作用）。
2. 您应该在输入元素中添加属性：type =“ button”，否则它将不会呈现为按钮-它将呈现为输入框。更好的是，使用<button>元素代替。
3. 另外，由于右上角使用浮点，因此每个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>

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

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

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

从v3.1.0开始，向右拉折旧。只是抬起头。

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

pull-right为按钮申请课程。 http://getbootstrap.com/css/#helper-classes-floats >助手类

此链接将有帮助

现在，您需要向现有的.dropdown-menu元素添加.dropdown-menu-right。不再支持向右拉。此处的更多信息http://getbootstrap.com/components/#btn-dropdowns

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

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

如果可行，则可以尝试处理现有内容或为此添加其他格式并实现所需的功能。因为您使用的是引导程序，并不意味着它不能为您提供所需的东西，那么您就可以对其进行管理。您正在使用您的代码，因此您可以按要求执行命令。干杯!

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

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

喜欢

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

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

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

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

用于bootstrap 4 文档

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