twitter-bootstrap-3 - Bootstrap 3 mixin 多个 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 视口(viewport)，但在我调整为 MD 或 LG 大小时(然后采用 SM 大小)则无法正常工作。这是为不同视口(viewport)大小创建列的正确方法吗？任何的想法？

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对于大于 1200 像素的屏幕，会覆盖您的大列代码。