Twitter bootstrap 3 Bootstrap 3混入多个make-*-列

我正在使用一个特定的mixin，试图使我的代码更清晰。因此，与其使用：

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

---

它可以在XS和SM视口中正常工作，但当我调整到MD或LG（然后使用SM大小）时则不能正常工作。这是为不同的视口大小创建列的正确方法吗？有什么想法吗？

您应该重新订购混音通话：

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

@马克斯是对的。Bootstrap的代码是mobile first，这意味着当屏幕变宽时，您应该以最小的屏幕宽度以及特性和属性启动代码

引导使用CSS媒体查询使CSS代码响应。在您的情况下，

。制作lg列（3）编译为CSS代码，如下所示：

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

如果你写
，就做md列（4）在
之后。制作lg列（3）
媒体（最小宽度：992px）
将出现
@media（最小宽度：1200px）
，并对大于1200px的屏幕计算
true
，从而覆盖您的大列代码。
如果我理解正确，您需要反向调用那些（即
xs
到
lg
），否则，
sm
样式将覆盖
md
和
lg
，因为它们都只设置了一个
min width
查询（w/o
max width
）。顺便说一句，这同样适用于HTML类顺序-即较小的类应该优先。也就是说！谢谢！如果你写它作为一个答案，我会接受它。以防万一，以纠正我的评论上面。“HTML类顺序”实际上并不重要——重要的只是它们在CSS中的顺序。
.stackOverflowRocksIt {
    .make-xs-column(12);
    .make-sm-column(6);
    .make-md-column(4);
    .make-lg-column(3);
}

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