34

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

类似于：pull-left-sm pull-right-lg。

我已经设法用 jquery 来做到这一点，捕捉窗口的大小。还有其他方法吗？Pref 无需在 hidden-x pull-left 中复制代码。或者现在在响应时复制代码/内容是否被认为更合适？

4

7 回答 7

60

只需将其添加到您的 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>
于 2014-01-15T11:51:15.053 回答
29

您可以使用CSS 媒体查询

基本用法会是这样的；如果你想在宽度为 500px 的设备下方左浮动，那么

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

 @media (min-width: 501px) {
 .your_class {
    float: right;
  }
}
于 2013-08-20T07:51:22.080 回答
7

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

该类的语法是where is 、 或col-<#grid-size>-(push|pull)-<#cols>and<#grid-size>是xs您sm希望该列针对该网格大小移动的距离。推或拉当然是左或右。mdlg<#cols>

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

于 2015-02-28T09:05:09.940 回答
3

可能您可以使用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>

看起来像@Alex所做的那样，浮动列将被添加到版本4中 - https://github.com/twbs/bootstrap/issues/13690

于 2014-08-06T21:41:53.823 回答
2

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

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

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

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

于 2013-08-20T07:51:37.483 回答
0

这就是我正在使用的。将@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;
    }
}
于 2014-06-18T09:19:44.147 回答
0

@Alex 答案的 LESS 版本

@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();
    }
}
于 2018-12-14T16:25:55.993 回答