- 首页
- 前端开发
- Bootstrap 3:仅用于 col-lg 的右拉
Bootstrap 3:仅用于 col-lg 的右拉
[英] Bootstrap 3: pull-right for col-lg only
本文介绍了Bootstrap 3:仅用于 col-lg 的右拉的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
引导程序 3 的新手......在我的布局中，我有:
<div class="col-lg-6 col-md-6">元素 1</div><div class="col-lg-6 col-md-6"><div class="pull-right">元素 2
我希望元素 2"不要在小于 col-lg 的屏幕上正确对齐.如此有效地让类只为 col-lg-6 右拉...
我怎样才能做到这一点?
这是一个小提琴:http://jsfiddle.net/thibs/Y6WPz/
谢谢
解决方案
您可以将元素 2"放在较小的列中(即:col-2)，然后使用 push 仅适用于大屏幕:
<div class="col-lg-6 col-xs-6">元素 1</div><div class="col-lg-6 col-xs-6"><div class="row"><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">元素 2</div>
演示:http://bootply.com/88095
另一种选择是使用@media 查询覆盖 .pull-right 的浮动..
@media (max-width: 1200px) {.row .col-lg-6 >.拉右{浮动:无！重要；}}
最后，另一种选择是创建您自己的 .pull-right-lg CSS 类..
@media(最小宽度:1200px){.pull-right-lg {浮动:对；}}
更新
Bootstrap 4 包括响应式浮动，因此在这种情况下，您只需使用 float-lg-right.
不需要额外的 CSS.
Bootstrap 4 演示
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>
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...
How could I achieve this?
Here is a fiddle: http://jsfiddle.net/thibs/Y6WPz/
Thank-you
解决方案
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="row">
<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>
</div>
Demo: http://bootply.com/88095
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;
}
}
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 includes responsive floats, so in this case you'd just use float-lg-right.
No extra CSS is needed.
Bootstrap 4 Demo
这篇关于Bootstrap 3:仅用于 col-lg 的右拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
