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

Question

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

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

然而，按钮低于H1。

我真的看不出这出错的地方，如果有人能看到明显的东西，那么它将是最有帮助的。

Answer 1

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

Answer 2

您的问题与边距有关。 width（.sixteen.columns）的940px似乎不支持width宽margin个孩子的.eight和960px。宽度为460px x 2] +边距为[10px x 4] = .sixteen > .eight.columns { margin-right: 5px; margin-left: 5px; } ）。我不太了解Skeleton是否知道这是否是他们的问题，但似乎是这样。

您需要确定您希望这些孩子的反应方式。您可以轻松地执行以下两项操作之一，但它会如何影响您的“列”对齐方式会有所不同。

＃1减少所有儿童边距

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

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

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

{{1}}