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-right类使用text-align: right将该元素的内容对齐。

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

Answer 2

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

您可以在doc：http://getbootstrap.com/css/#grid-offsetting

中阅读更多内容

Answer 3

如果您在某个小组正文中，只需添加一个关于将课程pull-right放在哪里的工作示例...问题是班级pull-right会自动删除左右边距（{{ 1}}），因此我们不能只将类添加到元素中，而不用margin-left:-15px; margin-right:-15px和row包装它们。

我认为col-lg-12优于pull-right，因为对于后者，我们不知道要对齐的元素的宽度是否只是（12-n）的总宽度）专栏。

col-xx-offset-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>

Twitter Bootstrap列没有正确对齐

3 个答案: