我在这里有一个简单的演示:
<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> < /德>
当前回答
在推特引导3尝试类右拉
class="btn pull-right"
其他回答
“右拉”类可能不是正确的方式，因为它使用“float: right”而不是文本对齐。
检查引导3 css文件，我发现“文本权利”类在第457行。这个类应该是将文本向右对齐的正确方式。
一些代码: 对于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>
使用按钮标记代替输入，并使用右拉类。
右拉类完全混淆了你的两个按钮，但你可以通过在右侧定义自定义边距来解决这个问题。
<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 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>
<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>
一种方法是将这种样式应用于列表项，以保持它们的内联
or
<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右拉帮助器并不适用于我们，因为它使用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>
