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

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


当前回答

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

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

其他回答

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

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

更新2019 -引导4.0.0

在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列表,而使用块元素作为行。

右浮动仍然不起作用吗?

请记住,Bootstrap 4现在是flexbox,许多元素是display:flex,这可以阻止右浮动的工作。在某些情况下,像align-self-end或ml-auto这样的util类工作于向右对齐flexbox容器中的元素,如Bootstrap 4 .row, Card或Nav。

还要记住,右文本仍然适用于内联元素。

引导4对齐右示例


引导3

使用右拉类。

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

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

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

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