Bootstrap，小型设备的左拉 [英] Bootstrap, pull-left for small devices

问题描述

我正在 Bootstrap 3 中构建一个站点.有没有办法让元素在较小的设备上使用 pull-left 类，而在较大的设备上使用 pull-right 类?

I'm building a site in Bootstrap 3. Is there anyway to make a element use the class pull-left on smaller devices and use pull-right on larger ones?

类似于:pull-left-sm pull-right-lg.

我已经设法用 jquery 做到了，捕捉窗口的大小调整.有没有其他办法?Pref 无需复制 hidden-x pull-left 中的代码.或者现在在响应时复制代码/内容是否更合适?

I've managed to do it with jquery, catching the resize of the window. Is there any other way? Pref without duplicating the code in a hidden-x pull-left. Or is it considered more ok to duplicate code/content now when going responsive?

推荐答案

您可以使用 CSS 媒体查询

基本用法会是这样；如果您想在宽度为 500 像素的设备下方向左浮动，则

basic usage will be like this; if you want to float left below devices of width 500px, then

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

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

这篇关于Bootstrap，小型设备的左拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！