Twitter bootstrap 3 引导，对于小型设备向左拉

我正在Bootstrap3中创建一个站点。 有没有办法让一个元素在较小的设备上使用类“左拉”，在较大的设备上使用类“右拉”

比如：向左拉sm向右拉lg

我已经设法用jquery实现了这一点，捕捉到了窗口的大小调整。还有别的办法吗？在不复制代码的情况下，以隐藏x向左拉。或者，现在进行响应时，复制代码/内容是否更合适

您可以使用

基本用法如下；如果您想在宽度为500px的设备下方向左浮动，则

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

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

---

对。创造你自己的风格。我不知道您尝试向左/向右浮动的元素是什么，但请创建一个application.css文件并为其创建一个css类：

/* default, mobile-first styles */
.logo {
    float: left;
}

/* tablets and upwards */
@media (min-width: 768px) {
    .logo {
        float: right;
    }
}

---

不要害怕编写自定义CSS。引导就是这样的：一个引导，一个起始点。

只需将此添加到您的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;
    }
}

当然，如果您使用纯CSS，请为

$screen-*

插入实际的px值

HTML:

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

此div仅浮动在屏幕md和屏幕lg上

这就是我正在使用的。将@screen xs max更改为其他尺寸

/* Pull left in mobile resolutions */
@media (max-width: @screen-xs-max) {
    .pull-xs-right {
        float: right !important;
    }
    .pull-xs-left {
        float: left !important;
    }

    .radio-inline.pull-xs-left  + .radio-inline.pull-xs-left ,
    .checkbox-inline.pull-xs-left  + .checkbox-inline.pull-xs-left  {
        margin-left: 0;
    }
    .radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
        margin-right: 10px;
    }
}

也许你可以用

.col-md-9.col-md-push-3
.col-md-3.col-md-pull-9

---

看起来浮动列将通过@Alex has done添加到版本4中-

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

该类的语法是

col--（push | pull）

，其中

是

xs

，

sm

，

md

或

lg

，并且

是您希望该网格大小的列移动多远。推或拉当然是向左或向右

---

我一直在使用它，所以我知道它很好用。

较少版本的@Alex的答案

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

    .pull-xs-right {
        .pull-right();
    }
}

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

    .pull-sm-right {
        .pull-right();
    }
}

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

    .pull-md-right {
        .pull-right();
    }
}

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

    .pull-lg-right {
        .pull-right();
    }
}

---

你为什么选择另一个答案而不是我的？不，没有理由。它们看起来很相似，所以我选了第一个。这并没有改变我仍然很高兴你的回应的事实，如果我也能选择你的，我会的。我没有不尊重任何人，如果我这样做了，我的任命。这解决了问题，但不能在上下文中回答。当然我们可以写自定义的。但是上下文是如果你能用标准的引导类来做的话。这对我来说很有效，但是在引导3中，我将500px和501px更改为767px，768px引导3包含了所需的类：使用“列排序”。例如，“col-md-9 col-md-pull-3 col-lg-8 col-lg-push-4”。这在引导中不起作用，因为引导使用！important@Alex，如何调整此值以遵循列的处理方式？也就是说，命名你想要的目标屏幕大小，它会根据该大小浮动。是否只需删除每个媒体定义上的最大宽度设置？我已经这样做了，但如果这是最好的方法，我还想听听第二种意见。Bootstrap3包含了所需的类：使用“列排序”。例如，“col-md-9 col-md-pull-3 col-lg-8 col-lg-push-4”@是的，这就是方法。此外，您可以删除

@media（max width:$screen xs max）{}

条件，因为这是默认条件。您甚至可以删除

的规则。向左拉X

和

完全是因为它们是多余的，因为普通的
。向左拉
和
。向右拉
仍然存在。下面是一个简短的示例：
@BenDowney，但您的示例不起作用。col-xs-push-6向左：50%，这适用于相对或绝对定位元素，例如，如果我想在桌面上向左拉，但在移动设备上居中，我仍然需要转换：translateX（-50%）；关于内部元素。如果我理解正确，请在此处复制完整的插入式解决方案：
@media (max-width: @screen-xs-max) {
    .pull-xs-left {
        .pull-left();
    }

    .pull-xs-right {
        .pull-right();
    }
}

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

    .pull-sm-right {
        .pull-right();
    }
}

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

    .pull-md-right {
        .pull-right();
    }
}

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

    .pull-lg-right {
        .pull-right();
    }
}