Twitter Bootstrap 列未右对齐答案

【问题标题】：Twitter Bootstrap column not right aligningTwitter Bootstrap 列未右对齐
【发布时间】：2018-03-05 17:08:29
【问题描述】：

我试图在我的屏幕上显示一行，左侧是登录信息，然后是最右侧的一些其他信息，右对齐。这是我不成功的尝试：

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

但第二列位于行的中间，因此在“单元格”中似乎不正确。谁能指导我做对吗？

【问题讨论】：

你能添加一个 jsFiddle 吗？
刚刚找到修复程序。我使用 text-right 类，它可以工作。只是不确定这和右拉之间有什么区别。除了 text-right 有效的事实......

标签： twitter-bootstrap

【解决方案1】：

使用 text-right 而不是 pull-right。

text-right 类使用text-align: right 将该元素的内容右对齐。

pull-right 类使用float:right 对齐元素本身。

【讨论】：

谢谢。 Bootstrap 已经到了功能太多的地步。我的专栏中有按钮，但 text-right 是使它们右对齐的唯一方法。

【解决方案2】：

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

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

【讨论】：

【解决方案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 |      |
+----------------------------------------------+---------+---------+------+

【讨论】：