奇点网格系统在使用“容器”时显示网格

Question

我有一个Singularity布局，可以在“容器”的任意一侧放置填充物。就像在这里的奇点问题中提出的那样：https://github.com/Team-Sass/Singularity/issues/91

.container {
  // Sets a max width. Site will be fluid until it reaches 960px, then stick there.
  max-width: 960px;
  // Centers the container.
  margin: 0 auto;
  // Sets padding equal to a gutter.
  padding-left: gutter-span();
  padding-right: gutter-span();
  // Might as well clearfix it as well.
  @include clearfix;
}

基本的需求就是这样，两边都有间隙，所以它看起来在较小的屏幕上有缓冲。

我不明白的是，在开发过程中我会使用@include background-grid显示网格的元素。

如果我把它放在.container上，那么网格将显示在填充下，这不是网格的一部分。当然，我可以在其中创建一个元素，但是该元素纯粹是出于可视化开发的目的，所以当我关闭网格显示时这个元素就是多余的。

你可以在下面的图片中看到黑线是如何走到它的父亲.container的边缘的，但​​是网格正好是这样的。

Answer 1

因此，您使用填充将容器添加到容器中。背景恰好伸展到填充水槽，因此您的网格已关闭。

正面解决方案是使用子容器。将填充应用于外部容器。将clearfix和网格背景应用于内部容器。

background-clip: content-box确实是一个更好的解决方案。无论如何，你不需要在IE8中调试网格背景。