Bootstrap 3 mixin multiple make - * - column

Question

我正在使用特定的mixin试图让我的代码更清晰.所以不要使用:

<div class="col-lg-3 col-md-5 col-sm-6 col-xs-12">

我正在使用:

<div class="stackOverflowRocksIt">

在我的mixins.less:

.stackOverflowRocksIt{
    .make-lg-column(3);
    .make-md-column(4);
    .make-sm-column(6);
    .make-xs-column(12);
}

它适用于XS和SM视口,但不适用于我调整大小到MD或LG(然后采用SM大小).这是为不同视口大小创建列的正确方法吗？任何的想法？

Answer 1

你应该重新订购你的mixin电话:

.stackOverflowRocksIt {
    .make-xs-column(12);
    .make-sm-column(6);
    .make-md-column(4);
    .make-lg-column(3);
}

@ seven-phases-max是对的.Bootstrap的代码首先是移动的,这意味着当屏幕尺寸变宽时,您应该为最小的屏幕宽度和功能以及属性启动代码.

Bootstrap使用CSS媒体查询来使CSS代码响应.在您的情况下,.make-lg-column(3); 编译成如下所示的CSS代码:

@media (min-width: 1200px) {
  .stackOverflowRocksIt {
    float: left;
    width: 25%;
  }
}

如果您在遗嘱.make-md-column(4);之后写作并且还评估宽度超过1200px的屏幕,那么将覆盖您的大列代码..make-lg-column(3);@media (min-width: 992px)@media (min-width: 1200px)true