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

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


当前回答

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

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

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

其他回答

为按钮应用右拉类。 http://getbootstrap.com/css/#helper-classes-floats -> Helper类

这个链接会有帮助

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

最接近的解决方案是浮动端。

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

更新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右拉帮助器并不适用于我们,因为它使用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>