我在这里有一个简单的演示:
<ul>
<li>One <input class="btn pull-right" value="test"></li>
<li>Two <input class="btn pull-right" value="test2"></li>
</ul>
我有一个无序的列表和每个列表项目，我希望有文本在左边，然后一个右对齐按钮。我曾尝试使用拉右，但这完全混乱了对齐。我做错了什么?
<链接href=“http://twitter.github.com/bootstrap/assets/cssstrap.css”“terlesheet”/> <德> <li>One <输入级=“btn pullright”值=“测试”></li> <li> 2 < <输入级=“btn -right引体”值=“test2”</li> < /德>
当前回答
用于引导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>
其他回答
使用Bootstrap右拉帮助器并不适用于我们，因为它使用float: right，这迫使内联块元素变成块。当.btns变成块时，它们失去了内联块作为准文本元素提供的自然边距。
所以我们使用direction: rtl;在父元素上，这导致该元素内的文本从右向左布局，这也导致内联块元素从右向左布局。你可以像下面这样使用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>
在class属性中插入pull-right，让bootstrap来排列按钮。
对于Bootstrap 2.3，请参见:http://getbootstrap.com/2.3.2/components.html#misc >帮助类> .pull-right。
关于引导3，请参见:https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper类。
关于Bootstrap 4，请参见:https://getbootstrap.com/docs/4.0/utilities/float/#responsive
右拉命令被移除并替换为右浮动命令或一般的float-{sm,md,lg,xl}-{左，右，none}
Boostrap 5参见:https://getbootstrap.com/docs/5.0/utilities/float/
最接近的解决方案是浮动端。
<p align="right">
<button type="button" class="btn btn-primary">Submit</button>
</p>
在推特引导3尝试类右拉
class="btn pull-right"
问题是您将按钮用作列表的一部分。因为列表项之间的垂直边距太低，无法将按钮放置在中间，它会使对齐混乱。我将把一个按钮放在列表的顶部，另一个按钮放在它们下面，这样它看起来就像你所期望的那样!
<ul>
<input class="btn pull-right" value="test">
<li>One</li>
<li>Two</li>
<input class="btn pull-right" value="test2">
</ul>
