骨架响应网格损坏 - 列下降

Question

所以，我刚刚开始尝试响应式网格框架Skeleton的演示。

在我的演示页面上，在标题中，我试图将 H1 放入八列div，将按钮放入八列网格 - 这些位于 16 列容器内。

但是，按钮低于 H1。

我真的看不出哪里出了问题，如果有人能看到一些明显的东西，那将是最有帮助的。

Answer 1

似乎文档有点不清楚 - alpha 和 omega 需要添加到第一/最后一列以整理边距。

Answer 2

您的问题与边距有关。.sixteen.columns的width（940px）似乎不支持两个.eight宽的子项的width和margin（宽度[460px x 2]+ [10px x 4]边距= 960px）。我对骷髅的了解还不够多，不知道这是否是他们的问题，但似乎是这样。

你需要确定你希望这些孩子如何反应。您可以轻松地执行以下两件事之一，尽管它如何影响您的"列"对齐方式会有所不同。

#1 减少所有儿童利润

.sixteen > .eight.columns { 
    margin-right: 5px; 
    margin-left: 5px; 
}

#2 保留外边距并消除中心边距

.sixteen > .eight.columns:first-child { 
    margin-right: 0;  
}
.sixteen > .eight.columns:last-child { 
    margin-left: 0;  
}