twitter-bootstrap 如何让我的 Twitter Bootstrap 按钮右对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15446189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get my Twitter Bootstrap buttons to right align?
提问by deltanovember
I have a simple demo here:
我在这里有一个简单的演示：
<ul>
<li>One <input class="btn pull-right" value="test"></li>
<li>Two <input class="btn pull-right" value="test2"></li>
</ul>
I have an unordered list and for each list item I wish to have text on the left and then a right aligned button. I have tried to use pull-right but this completely messes up the alignment. What am I doing wrong?
我有一个无序列表，对于每个列表项，我希望左侧有文本，然后是右对齐按钮。我曾尝试使用右拉，但这完全弄乱了对齐方式。我究竟做错了什么？
回答by aronadaal
Insert pull-rightinto the class attribute and let bootstrap arrange the buttons.
插入pull-right到 class 属性中，让 bootstrap 排列按钮。
For Bootstrap 2.3, see: http://getbootstrap.com/2.3.2/components.html#misc> Helper classes > .pull-right.
对于Bootstrap 2.3，请参阅：http: //getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-right。
For Bootstrap 3, see: https://getbootstrap.com/docs/3.3/css/#helper-classes> Helper classes.
对于Bootstrap 3，请参阅：https: //getbootstrap.com/docs/3.3/css/#helper-classes> Helper classes。
For Bootstrap 4, see: https://getbootstrap.com/docs/4.0/utilities/float/#responsive
对于Bootstrap 4，请参见：https: //getbootstrap.com/docs/4.0/utilities/float/#responsive
The pull-rightcommand was removed and replaced with float-rightor in general to float-{sm,md,lg,xl}-{left,right,none}
该pull-right命令已被删除并替换为float-right或一般为float-{sm,md,lg,xl}-{left,right,none}
回答by Shawn Vader
In twitter bootstrap 3 try the class pull-right
在 twitter bootstrap 3 中试试这个类pull-right
class="btn pull-right"
回答by César León
"pull-right" class may not be the right way because in uses "float: right" instead of text-align.
"pull-right" 类可能不是正确的方法，因为在使用 "float: right" 而不是 text-align 。
Checking the bootstrap 3 css file i found "text-right" class on line 457. This class should be the right way to align the text to the right.
检查 bootstrap 3 css 文件，我在第 457 行找到了“text-right”类。这个类应该是将文本向右对齐的正确方法。
Some code:
一些代码：
<div class="row">
<div class="col-xs-12">
<div class="text-right">
<button type="button" class="btn btn-default">Default</button>
</div>
</div>
</div>
回答by Zim
Update 2019 - Bootstrap 4.0.0
2019 年更新 - Bootstrap 4.0.0
The pull-rightclass is now float-rightin Bootstrap 4...
在pull-right类现在是float-right在引导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
http://www.codeply.com/go/nTobetXAwb
It's also better to not align the ul list and use block elements for the rows.
最好不要对齐 ul 列表并为行使用块元素。
Is float-rightstill not working?
是float-right仍然没有工作？
Remember that Bootstrap 4 is now flexbox, and many elements are display:flexwhich can prevent float-right from working. In some cases, the util classes like align-self-endor ml-autowork to right align elements that are inside a flexbox container like a Bootstrap 4 .row, Card or Nav.
请记住，Bootstrap 4 现在是 flexbox，并且许多元素display:flex会阻止 float-right 工作。在某些情况下，util 类喜欢align-self-end或ml-auto用于右对齐 flexbox 容器内的元素，如 Bootstrap 4 .row、Card 或 Nav。
Also remember that text-rightstill works on inline elements.
还要记住，它text-right仍然适用于内联元素。
Bootstrap 4 align right examples
Bootstrap 3
引导程序 3
Use the pull-rightclass.
使用pull-right类。
回答by Shehzad Mehmood
Use buttontag instead of inputand use pull-rightclass.
使用button标签代替input并使用pull-right类。
pull-rightclass totally messes up both of your buttons, but you can fix this by defining custom margin on the right side.
pull-rightclass 完全弄乱了您的两个按钮，但是您可以通过在右侧定义自定义边距来解决此问题。
<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>
Then use the following CSS for the class
然后为类使用以下 CSS
.RbtnMargin { margin-left: 5px; }
回答by yuvilio
Adding to the accepted answer, when working within containers and columns that have built in padding from bootstrap, I sometimes have a full stretched column with a child div that does the pulling to be the way to go.
添加到已接受的答案中，当在从引导程序内置填充的容器和列中工作时，我有时会有一个完整的拉伸列，其中有一个子 div，它可以将拉动作为要走的路。
<div class="row">
<div class="col-sm-12">
<div class="pull-right">
<p>I am right aligned, factoring in container column padding</p>
</div>
</div>
</div>
Alternately, have all your columns add up to your total number of grid columns (12 by default) along with having the first column be offset.
或者，将所有列加起来等于网格列的总数（默认为 12），同时偏移第一列。
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
This content and its sibling..
</div>
<div class="col-sm-4">
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).
</div>
</div>
回答by Allan Nienhuis
Sorry for replying to an older already answered question, but I thought I'd point out a couple of reasons that your jsfiddle does not work, in case others check it out and wonder why the pull-right class as described in the accepted answer doesn't work there.
很抱歉回复一个较旧的已经回答的问题，但我想我会指出你的 jsfiddle 不起作用的几个原因，以防其他人检查它并想知道为什么接受的答案中描述的 pull-right 类没有不在那里工作。
- the url to the bootstrap.css file is invalid. (perhaps it worked when you asked the question).
- you should add the attribute: type="button" to your input element, or it won't be rendered as a button - it will be rendered as an input box. Better yet, use the
<button>element instead. - Additionally, because pull-right uses floats, you will get some staggering of the button layout because each LI does not have enough height to accommodate the height of the button. Adding some line-height or min-height css to the LI would address that.
- bootstrap.css 文件的 url 无效。（也许当你问这个问题时它起作用了）。
- 您应该将属性：type="button" 添加到您的输入元素，否则它不会呈现为按钮 - 它将呈现为输入框。更好的是，改用
<button>元素。 - 此外，因为 pull-right 使用浮动，你会得到一些令人震惊的按钮布局，因为每个 LI 没有足够的高度来容纳按钮的高度。向 LI 添加一些 line-height 或 min-height css 可以解决这个问题。
working fiddle: http://jsfiddle.net/3ejqufp6/
工作小提琴：http: //jsfiddle.net/3ejqufp6/
<ul>
<li>One <input type="button" class="btn pull-right" value="test"/></li>
<li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>
(I also added a min-width to the buttons as I couldn't stand the look of a ragged right-justified look to the buttons because of varying widths :) )
（我还为按钮添加了一个最小宽度，因为由于宽度不同，我无法忍受按钮右对齐的参差不齐的外观:)）
回答by Carl G
Using the Bootstrap pull-righthelper didn't work for us because it uses float: right, which forces inline-blockelements to become block. And when the .btns become block, they lose the natural margin that inline-blockwas providing them as quasi-textual elements.
使用 Bootstrappull-right助手对我们不起作用，因为它使用float: right，这会强制inline-block元素变为block。当.btns 变成 时block，它们失去了inline-block作为准文本元素提供它们的自然边缘。
So instead we used direction: rtl;on the parent element, which causes the text inside that element to layout from right to left, and that causes inline-blockelements to layout from right to left, too. You can use LESS like the following to prevent children from being laid out rtltoo:
所以我们改为direction: rtl;在父元素上使用，这会导致该元素内的文本从右到左布局，并且inline-block也会导致元素从右到左布局。您可以使用 LESS 如下所示，以防止孩子也被布置rtl：
/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
direction: rtl;
* {
direction: ltr;
}
}
and use it like:
并像这样使用它：
<div class="btn-container-right">
<button class="btn">Click Me</button>
</div>
回答by Shahriyar Ahmed
In Bootstrap 4: Try this way with Flexbox. See documentation in getbootstrap
在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>
回答by Abhijit Kulkarni
Apply pull-rightclass for the button.
http://getbootstrap.com/css/#helper-classes-floats-> Helper classes
pull-right为按钮应用类。
http://getbootstrap.com/css/#helper-classes-floats-> 助手类
This link will help
此链接将有所帮助
