引导程序3：根据页面设置自定义容器大小

Question

我正在寻找一些不是默认容器大小的页面。 例如，假设我的默认值为1170px（默认值为Bootstraps）。 然后说我想要一个大约8列宽的容器，基于默认的1170px宽度（780px）。

我知道很多人的第一个想法就是维护1170px容器，然后只使用8列，偏移量为2，但这并不能达到我想要的结果。 因为它将导致页面在默认的1170px媒体查询设置下调整大小。 因此，我希望将新容器设置为875px。

我首先想到的是在SASS中执行以下操作：

@for $i from 6 through 11 {
  .layout-size-#{$i}{
    .main-cont{
      $container-width: (0.083333 * $i) * 1170px; // Single column width in percentage times # of columns, multiplied by max container width.
      width: ceil($container-width);
    }
  }
}

然后，我可以在各种媒体查询中执行类似的操作，以根据需要修改每个屏幕尺寸。 思考？ 有没有更好的方法？

Answer 1

好吧，我相信我现在已经可以使用了。 我最初提出的问题并不完全正确。 我想出的是：

@for $i from 6 through 10 {
  $container-width: ceil((0.083333 * $i) * 1170px); // Single column width in percentage times # of columns, multiplied by max container width.
  @media (min-width: ($container-width + $grid-gutter-width)) {
    .layout-size-#{$i}{
      .main-cont{
        width: $container-width;
      }
    }
  }
}

这样做是在每个可能的容器（加上装订线）的宽度上设置了许多媒体查询。 因此，如果我们想要一个与6列宽度匹配的容器（12列的基数为1170px）将为585px。 然后，我们设置一个类来将容器设置为该宽度。 我的类“ layout-size-6”假定设置在body元素上。 假定“ main-cont”类与“ container”类位于同一元素上。

最终，这可以使视口缩小到容器之前的大小，然后再将其调整为由Bootstrap的媒体查询设置的默认宽度。

生成的CSS：

@media (min-width: 615px) {
  .layout-size-6 .main-cont {
    width: 585px;
  }
}
@media (min-width: 713px) {
  .layout-size-7 .main-cont {
    width: 683px;
  }
}
@media (min-width: 810px) {
  .layout-size-8 .main-cont {
    width: 780px;
  }
}
@media (min-width: 908px) {
  .layout-size-9 .main-cont {
    width: 878px;
  }
}
@media (min-width: 1005px) {
  .layout-size-10 .main-cont {
    width: 975px;
  }
}

当然，您可以修改FOR语句以增加或减少容器大小。