如何使我的Twitter Bootstrap按钮正确对齐？

本文翻译自：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/

    
One 
    
Two 

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楼

    
One 
    
Two 

i just used layout..apply styles for li.. 我只是用布局..应用样式为李..

or 要么

    
One 
    
Two 

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不行，万一别人检查出来，不知为什么作为接受的答案中描述的拉正确的类没有按在那儿不工作。

1. the url to the bootstrap.css file is invalid. bootstrap.css文件的网址无效。 (perhaps it worked when you asked the question). （当您提出问题时，它可能会起作用）。
2. 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 element instead. 更好的是，改为使用元素。
3. 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/

  
One 
  
Two 

(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 :) ) （我还向按钮添加了最小宽度，因为由于宽度的变化，我无法忍受按钮参差不齐的右对齐外观：））