这是我的页面
<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
我面临的问题是,我无法使 buttons
(linked text4
)和 logout
标签在一条直线上对齐,即使我使用了 pull-right
和 offset
。
最佳答案
你的 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>
正如我现在看到的,还是有一点点不同,那是因为 .label
有一个 em 填充而 btn-sm 有一个绝对填充。您必须切换到两者的按钮或通过您的 custom.css 修复填充,但这可能会弄乱其他与标签相关的显示。
关于css - Bootstrap - 正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18980248/