Bootstrap 3:pull-right仅限col-lg [英] Bootstrap 3: pull-right for col-lg only
问题描述
新的到bootstrap 3 ....在我的布局我有:
New to bootstrap 3.... In my layout I have:
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6">
<div class="pull-right">
elements 2
</div>
</div>
</div>
我想元素2不会在小于col-lg屏幕上对齐。所以有效地让类拉下来只为col-lg-6 ...
I would like the 'elements 2' to NOT be aligned right on smaller than col-lg screens. So effectively having the class pull-right only for col-lg-6...
如何实现这个?
这里是一个小提琴: http://jsfiddle.net/thibs/Y6WPz/
谢谢
推荐答案
您可以将element 2 : col-2
),然后在较大的屏幕上使用 push
:
You could put "element 2" in a smaller column (ie: col-2
) and then use push
on larger screens only:
<div class="row">
<div class="col-lg-6 col-xs-6">elements 1</div>
<div class="col-lg-6 col-xs-6">
<div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
<div class="pull-right">elements 2</div>
</div>
</div>
</div>
另一个选项是覆盖 .pull-right
使用@media查询..
Another option is to override the float of .pull-right
using a @media query..
@media (max-width: 1200px) {
.row .col-lg-6 > .pull-right {
float: none !important;
}
}
最后,另一个选择是创建您自己的 .pull-right-lg
CSS类..
Lastly, another option is to create your own .pull-right-lg
CSS class..
@media (min-width: 1200px) {
.pull-right-lg {
float: right;
}
}
UPDATE:Bootstrap 4 将包括响应浮动广告。
这篇关于Bootstrap 3:pull-right仅限col-lg的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!