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

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


当前回答

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

其他回答

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

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

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

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

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

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

对于引导5:

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

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

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