twitter-bootstrap-3 – Bootstrap 3 mixin multiple make – * – column

我正在使用特定的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大小).这是为不同视口大小创建列的正确方法吗？任何的想法？

解决方法

你应该重新订购你的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);在.make-lg-column(3)之后; @media(min-width：992px)将出现@media(min-width：1200px),并且对于大于1200px的屏幕也会评估为true,因此会覆盖您的大列代码.