我使用Semantic.gs作为我的网格系统。我正在按照嵌套列示例来尝试创建我想要的内容，同时尽可能地遵循网格。给定来自 Semantic.gs 的嵌套列示例代码：

HTML

较少的

我的问题是，在尽可能遵守网格系统（semantic.gs）的同时，向嵌套列的父级添加填充（理想情况下与排水沟宽度相同）的最佳方法是什么？请注意，我使用的是 960px 的固定布局。

这是我尝试在米色父元素上使用左右填充来实现的示例（Photoshop，不完全根据上面的代码）图像：

更新： 按照桑迪普斯的例子，我能够做到这一点，但我没有提到我使用的是 960px 网格。这是我的结果：http ://bit.ly/M5fr5N 。

我正在使用 semantic.gs 为网页创建网格。我注意到无论我做什么，我都没有任何“排水沟”，这意味着在 CSS 中边距计算为 0，尽管默认值为 20px。

于是我退后一步，尝试复现这个非常简单的官方例子：

http://semantic.gs/examples/fixed/fixed.html

我尝试的输出在这里：

http://jsfiddle.net/QXpcq/

如您所见，再次没有排水沟。标记是相同的，输出 CSS 不是。我的输出 CSS 总是显示 0 的边距。您可能会认为这可能是由于我的输入与示例不同，但据我所见，事实并非如此。我正在使用 SCSS，如下所示：

我已经在演示中剪断了重置 CSS 代码和设置颜色样式的 CSS。相信我，正如您在小提琴中看到的那样，它们是官方演示的精确复制和粘贴。

“grid”导入是grid mixins的官方下载。我没有改变它。这里最大的谜团是为什么使用相同的标记和 SCSS 我会得到不同的结果？

难道是因为我的编译过程？我正在使用 Scout 应用程序来监控我的 SCSS 文件夹。它拾取对它的任何更改并将其编译为 CSS。

我正在使用语义网格系统来构建响应式站点。然而，媒体查询有些地方不太对劲，一旦达到特定的屏幕尺寸，显然应该启动。

我将引用他们在网站上的示例的意思：例如，如果我在我的 iPhone 上查看它，考虑到它应该在移动设备上调整为单列结构，它仍然会抛出网络版本的页。我的 iPhone 上的 Safari 和 Chrome 都是如此。但是，如果我使用RWD 小书签检查它在不同分辨率下的外观，它会按照移动分辨率的预期显示。此外，具有讽刺意味的是，如果我在桌面上的 Safari 中调整页面大小，一旦我缩小到合适的屏幕尺寸，它也会相应地调整，但在 Firefox 中则不会。

一旦达到 720px，它使用的媒体查询是

我在这里可能有点过分，但我认为这一定是问题所在。但鉴于这直接来自semantic.gs 网站，我认为我没有必要的专业知识来质疑他们自己的代码。

知道问题可能是什么吗？

我已经使用 Semantic.gs 和一些带有 LESS 的嵌套列实现了流畅的布局。但现在我们的客户决定他们想要修复布局。

我想我可以简单地注释掉 grid.less 中的 @total-width:100% 行，但是现在其他 LESS 文件在使用 .row() mixin 的行上给出了错误。

有解决方法吗？

这是 grid.less 的相关部分

这是 LESS 文件有问题的部分。LESS 编译器给出错误'Compiler Errors variable @total-width is undefined (Line: 292)'，这是带有 .row() 属性的行：

我决定尝试语义网格http://semantic.gs/因为我真的很喜欢将所有网格逻辑都放在 less 中的概念，而不必像在引导网格中那样向 HTML 添加类，这是我拥有的网格最近一直在使用。

我的问题是我找不到我遇到的问题的文档或参考：

我将 import grid.less 放在我的主目录中。

然后在我的 general.less 中定义 .column(12); 例如。

问题出在浏览器中：

当然，作为无效财产。

就像 less 没有编译那部分，但它肯定在编译，所以我有点卡在这里。以前有没有人遇到过这个问题，任何帮助将不胜感激。

我不得不提到我编译到一个 main.css 然后链接在页面中，我没有在网页中使用 less.js，这是我在他们的网站上看到的例子，但这不应该有影响，或者是的？

代码示例是

main.less（这个文件使用 grunt 编译成 main.css）

一般.less

grid.less（语义网格系统）

输出是

我到处寻找答案。我正在使用来自 semantic.gs 的 grid.less 并且工作正常。我只是对我的模板的一部分有问题。我知道默认情况下网格列加起来为 12。但是，对于我模板的一个特定部分，布局并没有扩展到整个屏幕宽度。

HTML 布局是 3 个 div

无风格

@import "components/grid.less"; 为了使用屏幕的全宽，我不得不增加最后 2 个 div 的列数。

底部 {

}

虽然，现在它似乎添加了 16 列（6+4+4并且我没有更改默认的@columns:12）。虽然浏览器中的渲染仍然很好，但我想知道为什么我不能简单地使用 column(3); 对于最后 2 个 div。除非我错过了某事，否则它似乎不一致。我希望我能弄清楚为什么。

提前致谢