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

时间:2012-07-03 12:10:20

标签: css xhtml skeleton-css-boilerplate

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

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

然而,按钮低于H1。

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

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:0)

您的问题与边距有关。 width.sixteen.columns)的940px似乎不支持widthmargin个孩子的.eight960px。宽度为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}}