本文翻譯自：How can I get my Twitter Bootstrap buttons to right align?
I have a simple demo here: 我在這裏有一個簡單的演示：
http://jsfiddle.net/HdeZ3/1/ http://jsfiddle.net/HdeZ3/1/
<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? 我究竟做錯了什麼？
#1樓
參考：https://stackoom.com/question/12oG5/如何使我的Twitter-Bootstrap按鈕正確對齊
#2樓
<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>
i just used layout..apply styles for li.. 我只是用佈局..應用樣式爲李..
or 要麼
<ul>
<li>One <input class="btn" value="test"></li>
<li>Two <input class="btn" value="test2"</li>
</ul>
in CSS 在CSS中
li {
line-height: 20px;
margin: 5px;
padding: 2px;
}
#3樓
Can you try a custom CSS aside the bootstrap CSS to see if any changes. 您能否在引導CSS之外嘗試自定義CSS，以查看是否有任何更改。 Try 嘗試
.move-rigth{
display: block;
float: right;
}
If it works then you can try manipulating what you have or adding other formatting to this and achieving what you desire. 如果可行，則可以嘗試處理現有內容或爲此添加其他格式並實現所需的功能。 Because you are using bootstrap doesn't mean if it doesn't offer you what you want then you just manage it. 因爲您使用的是引導程序，並不意味着它不能爲您提供所需的東西，那麼您就可以對其進行管理。 You are working with your codes and so you command it to do as you say. 您正在使用您的代碼，因此您可以按要求執行命令。 Cheers! 乾杯!
#4樓
Insert pull-right into the class attribute and let bootstrap arrange the buttons. pull-right插入class屬性，然後讓引導程序安排按鈕。
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>幫助器類> .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類。
For Bootstrap 4 , see: https://getbootstrap.com/docs/4.0/utilities/float/#responsive 對於Bootstrap 4 ，請參閱： https : //getbootstrap.com/docs/4.0/utilities/float/#sensitive
The pull-right command was removed and replaced with float-right or in general to float-{sm,md,lg,xl}-{left,right,none} 刪除了pull-right命令，並將其替換爲float-right或通常替換爲float-{sm,md,lg,xl}-{left,right,none}
#5樓
在twitter bootstrap 3中嘗試向右拉類
class="btn pull-right"
#6樓
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不行，萬一別人檢查出來，不知爲什麼作爲接受的答案中描述的拉正確的類沒有按在那兒不工作。
- the url to the bootstrap.css file is invalid. bootstrap.css文件的網址無效。 (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. 您應該在輸入元素中添加屬性：type =“ button”，否則它將不會呈現爲按鈕-它將呈現爲輸入框。 Better yet, use the
<button>element instead. 更好的是，改爲使用<button>元素。 - 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. 另外，由於右上角使用浮點數，因此每個LI的高度不足以容納按鈕的高度，因此您會錯開按鈕的佈局。 Adding some line-height or min-height css to the LI would address that. 在LI上添加一些行高或最小高度的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 :) ) （我還向按鈕添加了最小寬度，因爲由於寬度的變化，我無法忍受按鈕參差不齊的右對齊外觀：））