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); .make-lg-column(3); @media (min-width: 992px)后@media (min-width: 1200px)写true，并为宽度超过1200px的屏幕评估{{1}}，那么会覆盖您的大列代码。