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

Question

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

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

但是，按钮低于 H1。

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

Answer 1

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

Answer 2

您的问题与边距有关。( )的widththe似乎不支持两个宽子的and （宽度为 [460px x 2] + 边距为 [10px x 4] = ）。我对 Skeleton 了解得不够多，不知道这是否是他们的问题，但似乎是这样。.sixteen.columns940pxwidthmargin.eight960px

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

#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;  
}