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

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


当前回答

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

其他回答

使用按钮标记代替输入,并使用右拉类。

右拉类完全混淆了你的两个按钮,但你可以通过在右侧定义自定义边距来解决这个问题。

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

“右拉”类可能不是正确的方式,因为它使用“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>

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

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

从Bootstrap V3.3.1开始,下面的CSS样式将解决这个问题

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

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

对于引导5:

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

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