Bootstrap 3:仅用于col-lg的右拉

Question

新的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>

我希望'元素2'不要在小于col-lg屏幕上对齐.因此,只有col-lg-6有效地使用类右拉...

我怎么能实现这个目标？

这是一个小提琴:http://jsfiddle.net/thibs/Y6WPz/

谢谢

Answer 1

您可以将"元素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>

演示: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

Bootstrap 4包含响应浮动,所以在这种情况下你只需使用float-lg-right.
不需要额外的CSS.

Bootstrap 4演示

Answer 2

试试这个LESS片段(它是从上面的例子和grid.less中的媒体查询mixins创建的).

@media (min-width: @screen-sm-min) {
.pull-right-sm {
  float: right;
}
}
@media (min-width: @screen-md-min) {
.pull-right-md {
  float: right;
}
}
@media (min-width: @screen-lg-min) {
.pull-right-lg {
  float: right;
}
}

Answer 3

.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
    float: right;
}

.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
    float: left;
}
@media (max-width: 767px) {    
    .pull-right-not-xs, .pull-left-not-xs{
        float: none;
    }
    .pull-right-xs {
        float: right;
    }
    .pull-left-xs {
        float: left;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .pull-right-not-sm, .pull-left-not-sm{
        float: none;
    }
    .pull-right-sm {
        float: right;
    }
    .pull-left-sm {
        float: left;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .pull-right-not-md, .pull-left-not-md{
        float: none;
    }
    .pull-right-md {
        float: right;
    }
    .pull-left-md {
        float: left;
    }
}
@media (min-width: 1200px) {
    .pull-right-not-lg, .pull-left-not-lg{
        float: none;
    }
    .pull-right-lg {
        float: right;
    }
    .pull-left-lg {
        float: left;
    }
}

Answer 4

无需使用媒体查询创建自己的类.Bootstrap 3已经在Column Ordering下对媒体断点进行了浮动排序:http://getbootstrap.com/css/#grid-column-ordering

为类的语法是col-<#grid-size>-(push|pull)-<#cols>哪里<#grid-size>是XS,SM,MD或LG和<#cols>是你想多远柱移动该网格的大小.当然,向左或向右推或拉.

我一直都在使用它,所以我知道它运作良好.