twitter-bootstrap-3 - 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-* 插入实际 px 值如果你当然使用纯 CSS。

HTML:

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