bootstrap4 右对齐_如何让我的Twitter Bootstrap按钮右对齐？

如何让我的Twitter Bootstrap按钮右对齐？

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

[http://jsfiddle.net/HdeZ3/1/]

• One
• Two

我有一个无序列表，对于每个列表项，我希望左边有文本，然后是右对齐按钮。 我试图使用右拉，但这完全弄乱了对齐。 我究竟做错了什么？

16个解决方案

596 votes

将pull-right插入到class属性中，然后让bootstrap排列按钮。

对于Bootstrap 2.3，请参阅：[http://getbootstrap.com/2.3.2/components.html#misc]＆gt; 辅助班级＆gt;.pull右。

对于Bootstrap 3，请参阅：[https://getbootstrap.com/docs/3.3/css/#helper-classes]＆gt; 助手班。

对于Bootstrap 4，请参阅：[https://getbootstrap.com/docs/4.0/utilities/float/#responsive]

pull-right命令已删除并替换为float-right或一般更新为float-{sm,md,lg,xl}-{left,right,none}

aronadaal answered 2019-01-23T07:23:18Z

243 votes

在twitter bootstrap 3中尝试类拉右

class="btn pull-right"

Shawn Vader answered 2019-01-23T07:23:40Z

121 votes

“pull-right”类可能不是正确的方法，因为在使用“float：right”而不是text-align。

检查bootstrap 3 css文件我在第457行找到了“text-right”类。这个类应该是正确对齐文本的正确方法。

一些代码：

Default

César León answered 2019-01-23T07:24:15Z

31 votes

更新2018 - Bootstrap 4.0.0

pull-right类现在是Bootstrap 4中的pull-right ...

One

Two

[http://www.codeply.com/go/nTobetXAwb]

最好不要对齐ul列表并对行使用块元素。

pull-right仍然无法正常工作吗？

请记住，Bootstrap 4现在是flexbox，许多元素都是pull-right，可以防止浮动权限工作。 在某些情况下，像align-self-end或ml-auto这样的util类可以正确对齐Flexbox容器内部的元素，如Bootstrap 4 .row，Card或Nav。

还要记住，pull-right仍适用于内联元素。

Bootstrap 4对齐右边的例子

Bootstrap 3

使用pull-right类。

Zim answered 2019-01-23T07:25:32Z

19 votes

使用pull-right标签代替input并使用pull-right类。

pull-right类完全搞砸了你的两个按钮，但你可以通过在右侧定义自定义边距来解决这个问题。

Save

Cancel

然后使用以下CSS作为类

.RbtnMargin { margin-left: 5px; }

Shehzad Mehmood answered 2019-01-23T07:26:09Z

17 votes

添加到接受的答案，当在从引导程序中内置填充的容器和列中工作时，我有时会有一个带有子div的完全拉伸列，可以实现拉动。

I am right aligned, factoring in container column padding

或者，将所有列添加到网格列的总数(默认为12)，同时使第一列偏移。

This content and its sibling..

are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).

yuvilio answered 2019-01-23T07:26:38Z

12 votes

很抱歉回复一个较旧的已回答的问题，但我想我会指出你的jsfiddle不起作用的几个原因，以防其他人检查出来并想知道为什么接受的答案中描述的右拉类没有 在那里工作。

bootstrap.css文件的url无效。 (当你问这个问题时，它可能有用)。

你应该在输入元素中添加属性：type =“button”，否则它将不会呈现为按钮 - 它将呈现为输入框。 更好的是，请使用元素。

另外，因为pull-right使用浮动，你会得到一些交错的按钮布局，因为每个LI没有足够的高度来容纳按钮的高度。 向LI添加一些行高或最小高度的css将解决这个问题。

工作小提琴：[http://jsfiddle.net/3ejqufp6/]

• One
• Two

(我还在按钮上添加了一个最小宽度，因为我不能忍受看起来粗糙的右对齐按钮，因为宽度不同:))

Allan Nienhuis answered 2019-01-23T07:27:35Z

9 votes

使用Bootstrap direction: rtl;帮助器对我们不起作用，因为它使用inline-block，这迫使direction: rtl;元素变为inline-block.当rtls变为block时，它们失去了inline-block将它们作为准文本元素提供的自然边界。

因此我们在父元素上使用了direction: rtl;，这导致该元素内的文本从右向左布局，这也导致inline-block元素从右到左布局。 你也可以像以下一样使用LESS来防止孩子被安排rtl：

/* Flow the inline-block .btn starting from the right. */

.btn-container-right {

direction: rtl;

* {

direction: ltr;

}

}

并使用它像：

Click Me

Carl G answered 2019-01-23T07:28:12Z

4 votes

对该按钮应用pull-right类。[http://getbootstrap.com/css/#helper-classes-floats] - ＆gt; 助手班

这个链接会有所帮助

Abhijit Kulkarni answered 2019-01-23T07:28:41Z

3 votes

对于v3.1.0，向右拉是折旧的。只是一个抬头。

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

n1nja answered 2019-01-23T07:29:09Z

2 votes

你可以尝试一下自定义CSS除了bootstrap CSS，看看是否有任何变化。 尝试

.move-rigth{

display: block;

float: right;

}

如果它有效，那么你可以尝试操纵你拥有的东西或者为此添加其他格式并实现你想要的。 因为你使用bootstrap并不意味着如果它没有为你提供你想要的东西那么你就可以管理它。 您正在使用您的代码，因此您可以命令它按照您的说法执行操作。干杯!

OmniPotens answered 2019-01-23T07:29:38Z

2 votes

• One
• Two

我刚刚使用了layout..apply样式。

要么

• One
• Two

在CSS中

li {

line-height: 20px;

margin: 5px;

padding: 2px;

}

sasi answered 2019-01-23T07:30:09Z

2 votes

现在，您需要将.dropdown-menu-right添加到现有的.dropdown-menu元素中。 不再支持pull-right。 更多信息，请访问[http://getbootstrap.com/components/#btn-dropdowns]

Dan Ochiana answered 2019-01-23T07:30:32Z

2 votes

您也可以使用空白列在左侧给出空格

喜欢

Save

演示::Jsfiddle演示

user889030 answered 2019-01-23T07:31:08Z

0 votes

在Bootstrap 4中：使用Flexbox尝试这种方式。 请参阅bootstrap中的文档

Example 1

Example 2

Shahriyar Ahmed answered 2019-01-23T07:31:31Z

-1 votes

用于bootstrap 4文档

Start of the row

End of the row

Volodymyr Petlovy answered 2019-01-23T07:31:53Z