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

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

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

其他回答

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

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

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

<p align="right">
<button type="button" class="btn btn-primary">Submit</button>
</p>

在Bootstrap 4中:在Flexbox中尝试这种方式。参见getbootstrap中的文档

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>

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

使用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>