Bootstrap 3 的新手...在我的布局中我有：
<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>
我希望“elements 2”不要在小于 col-lg 的屏幕上正确对齐。因此，有效地仅对 col-lg-6 进行类右拉......
我怎样才能做到这一点？
这是一个小提琴：http://jsfiddle.net/thibs/Y6WPz/ http://jsfiddle.net/thibs/Y6WPz/
谢谢
您可以将“元素 2”放在较小的列中（即：col-2）然后使用push仅在较大屏幕上：
<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 http://bootply.com/88095
另一种选择是覆盖浮动.pull-right使用@media查询..
@media (max-width: 1200px) {
.row .col-lg-6 > .pull-right {
float: none !important;
}
}
最后，另一种选择是创建您自己的.pull-right-lgCSS类..
@media (min-width: 1200px) {
.pull-right-lg {
float: right;
}
}
UPDATE
引导程序4包括响应式浮动 https://v4-alpha.getbootstrap.com/utilities/responsive-helpers/#responsive-floats，所以在这种情况下你只需使用float-lg-right.
不需要额外的CSS.
Bootstrap 4 演示 http://www.codeply.com/go/cgvFxT8IkH
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
