twitter-bootstrap Twitter Bootstrap 列未正确对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20854775/
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
Twitter Bootstrap column not right aligning
提问by Craig
I am trying to have a row across my screen, with Login information on the left, and then some other info on the far right, right justified. This is my unsuccessful attempt:
我试图在我的屏幕上划一行，左边是登录信息，然后是最右边的一些其他信息，右对齐。这是我失败的尝试：
<div class="container well">
<div class="row">
<div class="col-lg-6">
@(Session["CurrentUserDisplay"] != null ? "Welcome, " + @Session["CurrentUserDisplay"] : "Not logged in")
</div>
<div class="col-lg-6 pull-right">Active Portfolio: @(Session["ActivePortfolioName"].ToString())
</div>
</div>
</div>
But the 2nd column is sitting in the middle of the row, so seems it's not right justified in the 'cell'. Can anyone guide me to get this right?
但是第二列位于行的中间，因此在“单元格”中似乎不正确。任何人都可以指导我做到这一点吗？
回答by ravisuhag
Instead of pull-rightuse text-right.
而不是pull-right使用text-right。
text-rightclass aligns the content of that element to right by using text-align: right.
text-rightclass 使用 将该元素的内容向右对齐text-align: right。
pull-rightclass aligns the element itself by using float:right.
pull-rightclass 使用 对齐元素本身float:right。
回答by Christian
I think you need to use offset. Add the class col-md-offset-*
我认为您需要使用偏移量。添加类 col-md-offset-*
You can read more in doc: http://getbootstrap.com/css/#grid-offsetting
您可以在文档中阅读更多内容：http: //getbootstrap.com/css/#grid-offsetting
回答by WesternGun
Just to add a working example about where to put the class pull-rightif you are in a panel body... the question is the class pull-rightautomatically delete the left and right margin (margin-left:-15px; margin-right:-15px), so we cannot just add the class to the elements without wrapping them with a rowand col-lg-12.
只是添加一个关于在pull-right面板主体中放置类的位置的工作示例......问题是类会pull-right自动删除左右边距（margin-left:-15px; margin-right:-15px），所以我们不能只将类添加到元素而不包装它们以row和col-lg-12。
I think pull-rightis better than col-xx-offset-nbecause with the latter one, we don't know if the width of the elements to align are just the total width of the (12-n) columns.
我认为pull-right比col-xx-offset-n后者更好，因为我们不知道要对齐的元素的宽度是否只是 (12-n) 列的总宽度。
<div class="panel panel-default">
<div class="panel-heading">
This is panel title
</div>
<div class="panel-body">
<div class="row">
...
</div>
<div class="row">
<div class="col-lg-12">
<div class="pull-right">
<button ...></button>
<button ...></button>
</div>
</div>
</div>
</div>
</div>
The final result is:
最终结果是：
+-----------------+
| panel |
+-----------------+------------------------------------------------+
| |
| This is panel heading. |
| |
+-------------------------------------------------------------------------+
| | |
| row 1, for form elements. | |
| | |
| | |
| | +
| | panel-body
| | +
| | |
| | |
| | |
| | |
+----------------------------------------------+---------+---------+ |
| row 2, only buttons to the right | button1 | button2 | |
+----------------------------------------------+---------+---------+------+
