Bootstrap - 正确对齐答案

【问题标题】：Bootstrap - Align ProperlyBootstrap - 正确对齐
【发布时间】：2013-09-24 21:25:05
【问题描述】：

这是我的页面

<div class="well">
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-2 pull-right">
                Hi | <span class="label label-info">Player</span> | <a href=""><span class="label label-danger">Logout</span></a><br><br>
            </div>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="row">
            <div class="col-lg-7 col-lg-offset-7">
                <a class="btn btn-primary btn-sm">Link 1 with big text </a>
                <a class="btn btn-primary btn-sm">Link2 oktext</a>
                <a class="btn btn-primary btn-sm">Linked text3</a>
                <a class="btn btn-primary btn-sm">Linked text4</a>
                <br><br>
            </div>
        </div>
    </div>
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-4">
                    <div class="thumbnail"><img src="http://lorempixel.com/400/300/"></div>
                </div>
                <div class="col-sm-4">
                    <div class="thumbnail"><img src="http://lorempixel.com/400/300/"></div>
                </div>
                <div class="col-sm-4">
                    <div class="thumbnail"><img src="http://lorempixel.com/400/300/"></div>
                </div>
            </div>
        </div><br/>

</div>

Bootply with output 我面临的问题是，即使我使用了pull-right 和offset，我也无法使buttons (linked text4) 和logout 标签对齐。

【问题讨论】：

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您的 pull-right 位于错误的元素上。它将 col-sm-2 和 col-lg-7 拉到应有的右侧。要使 div 的内容向右，您必须执行 text-right。使用 chrome 开发工具可以轻松分析。

    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-2 text-right pull-right">
                Hi | <span class="label label-info">Player</span> | <a href=""><span class="label label-danger">Logout</span></a><br><br>
            </div>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="row">
            <div class="col-lg-7 pull-right text-right">
                <a class="btn btn-primary btn-sm">Link 1 with big text </a>
                <a class="btn btn-primary btn-sm">Link2 oktext</a>
                <a class="btn btn-primary btn-sm">Linked text3</a>
                <a class="btn btn-primary btn-sm">Linked text4</a>
                <br><br>
            </div>
        </div>
    </div>

http://bootply.com/82835

正如我现在所看到的，仍然存在细微差别，那是因为.label 有一个 em 填充，而 btn-sm 有一个绝对填充。您必须切换到两者的按钮或通过您的 custom.css 修复填充，但这可能会弄乱其他与标签相关的显示。

【讨论】：