Bootstrap,左侧拉小型设备

Question

我正在Bootstrap 3中构建一个站点.无论如何要使一个元素在较小的设备上使用pull-left类并在较大的设备上使用pull-right？

类似的东西:pull-left-sm pull-right-lg.

我已经设法用jquery来做,抓住窗口的大小调整.还有其他方法吗？Pref没有在hidden-x pull-left中复制代码.或者,当响应时,现在重复代码/内容被认为是否更好？

Answer 1

只需将其添加到您的SASS文件:

@media (max-width: $screen-xs-max) {
    .pull-xs-left {
        float: left;
    }
    .pull-xs-right {
        float: right;
    }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    .pull-sm-left {
        float: left;
    }
    .pull-sm-right {
        float: right;
    }
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    .pull-md-left {
        float: left;
    }
    .pull-md-right {
        float: right;
    }
}

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

$screen-*如果您使用纯CSS,则插入实际的px值.

HTML:

<div class="pull-md-left pull-lg-left">
    this div is only floated on screen-md and screen-lg
</div>

Answer 2

您可以使用CSS Media Queries

基本用法就是这样; 如果你想在宽度为500px的设备下面浮动,那么

@media (max-width: 500px) {
 .your_class {
    float: left;
  }
}

 @media (min-width: 501px) {
 .your_class {
    float: right;
  }
}

Answer 3

无需使用媒体查询创建自己的类.Bootstrap 3已经在Column Ordering下对媒体断点进行了浮动排序.

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

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