Bootstrap 3：根据页面设置自定义容器大小答案

【问题标题】：Bootstrap 3: Setting custom container sizes based on pageBootstrap 3：根据页面设置自定义容器大小
【发布时间】：2014-05-03 14:37:01
【问题描述】：

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

我知道很多人的第一个想法是维护 1170px 容器，然后只使用 8 列，偏移量为 2，但这并没有得到我想要的结果。因为它会导致页面以默认的 1170 像素媒体查询设置调整大小。因此，我希望将新容器设置为 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);
    }
  }
}

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

【问题讨论】：

你知道你有 col-md。 col-sm 等。来控制你的列的浮动，对吧？
是的，但我的问题不在于定位列。当容器决定调整大小时，它与设置有关。我不想在它必须之前调整容器的大小。因此，如果我将页面设置为 10 列，则当窗口达到默认的 12 列宽度时，它不应该调整为更小的尺寸。这有意义吗？

标签： css twitter-bootstrap sass twitter-bootstrap-3

【解决方案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 列的基数为 1170 像素），那么它将是 585 像素。然后我们设置一个类来将容器设置为该宽度。假设我的类“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 语句。

【讨论】：