css - Zurb Foundation 6 柱中心不起作用

Question

我尝试在Zurb Foundation 6中将一列居中。

我正在使用以下默认类：small-6 small-centered columns，但在 ChromeDevTool 中，我注意到 float.columns:last-child:not(:first-child)覆盖了.small-centered.columns.

当我插入多列时，一切正常，除了最后一列。是基金会的bug吗？

JSFiddle

Answer 1

不，这不是 Foundation 中的错误，这是预期的行为。如果您查看http://foundation.zurb.com/sites/docs/grid.html#incomplete-rows它描述了他们为什么这样做。

如果您想覆盖此行为，这很容易。只需添加此 css 即可覆盖浮动。

.columns:last-child:not(:first-child) {
  float:none;
}