Twitter Bootstrap列没有正确对齐

Question

我试图在我的屏幕上有一行,左边是登录信息,然后是最右边的一些其他信息,右对齐.这是我不成功的尝试:

<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>

但是第二列坐在行的中间,所以看起来它在'单元'中是不正确的.任何人都可以指导我做到这一点吗？

Answer 1

而不是拉右使用文本权利.

text-rightclass通过使用将该元素的内容对齐text-align: right.

pull-rightclass通过使用对齐元素本身float:right.

Answer 2

我认为您需要使用偏移量。添加类col-md-offset- *

您可以在文档中阅读更多信息：http : //getbootstrap.com/css/#grid-offsetting

Answer 3

只是添加一个关于在pull-right面板主体中放置类的位置的工作示例......问题是类会pull-right自动删除左右边距（margin-left:-15px; margin-right:-15px），因此我们不能只将类添加到元素而不包装它们以row和col-lg-12。

我认为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>

最终结果是：

+-----------------+
|  panel          |
+-----------------+------------------------------------------------+
|                                                                  |
|  This is panel heading.                                          |
|                                                                  |
+-------------------------------------------------------------------------+
|                                                                  |      |
|  row 1, for form elements.                                       |      |
|                                                                  |      |
|                                                                  |      |
|                                                                  |      +
|                                                                  |   panel-body
|                                                                  |      +
|                                                                  |      |
|                                                                  |      |
|                                                                  |      |
|                                                                  |      |
+----------------------------------------------+---------+---------+      |
|  row 2, only buttons to the right            | button1 | button2 |      |
+----------------------------------------------+---------+---------+------+