Question

我正在Bootstrap 3中建立一个网站。反正有没有让一个元素在较小的设备上使用左拉类，并在较大的设备上使用拉 - ？

类似于： 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;
    }
}

如果您当然使用纯CSS，请插入$screen-*的实际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>是您希望列移动该网格大小的距离。当然，向左或向右推或拉。

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

Answer 4

您可以使用column ordering。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

看起来浮动列将被添加到版本4中，就像@Alex已完成 - https://github.com/twbs/bootstrap/issues/13690

Answer 5

是。创建自己的风格。我不知道你想要左/右浮动的元素，但是创建一个 application.css 文件并为它创建一个CSS类：

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

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

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

Answer 6

这就是我正在使用的。将@ 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;
    }
}

Answer 7

@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();
    }
}

Bootstrap，左侧拉小型设备

7 个答案: