如何让我的推特引导按钮对齐?

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

你可以尝试一个自定义CSS除了引导CSS看看是否有任何变化。试一试

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

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

在class属性中插入pull-right，然后让bootstrap来排列按钮。

对于引导2.3，请参见:http://getbootstrap.com/2.3.2/components.html#misc >辅助类>.pull-right。

对于引导3，请参见:https://getbootstrap.com/docs/3.3/css/#helper-classes >助手类。

对于引导4，请参见:https://getbootstrap.com/docs/4.0/utilities/float/#responsive

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

对于Boostrap 5，请参见:https://getbootstrap.com/docs/5.0/utilities/float/

最接近的解决方案是float-end。

在twitter引导3中尝试类扯

class="btn pull-right"

很抱歉回答一个已经回答过的老问题，但我想我应该指出你的jsfiddle不能工作的几个原因，以防其他人检查它并想知道为什么在接受的答案中描述的拉右类在那里不能工作。

1. bootstrap.css文件的url无效。(也许当你问这个问题时它起作用了)。
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，而强制__ABC2元素变成block。当__abc4变成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>

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

添加到公认的答案，当在容器和列中工作时，从bootstrap中内置了填充，我有时会有一个完整的拉伸列，其中有一个子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>

“pull-right"类可能不是正确的方式，因为in使用了“;float: right”;而不是文本对齐。

检查bootstrap 3 css文件，我发现"text-right"第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>

自举5

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

这个链接会有帮助

自v3.1.0起，右拉权贬值。 只是提醒一下。

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

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

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

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

就像

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

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

更新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这样的util类用于右对齐flexbox容器中的元素，如Bootstrap 4 .row, Card或Nav。

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

Bootstrap 4 align right examples

引导3

使用pull-right类。

在引导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.3.1下面的CSS样式将解决这个问题

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

注意:我尝试了上面帖子中的所有建议，所有地址都是旧版本，不提供对新集引导版本的修复。

问题是您将按钮用作列表的一部分。因为列表项之间的垂直边距太低，无法将按钮放置在中间，它会使对齐混乱。我将把一个按钮放在列表的顶部，另一个按钮放在它们下面，这样它看起来就像你所期望的那样!

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

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

对于引导5:

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

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

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