0

刚开始使用 Zurb Foundation 并从版本 4 开始，我无法找到一种方法让网格仅在小屏幕上与中心对齐，然后在大屏幕上恢复为默认网格。Foundation 4 提供的本地类是否可以做到这一点？

我在http://foundation.zurb.com/docs/components/grid.html上查看了他们的文档，其中演示了“small-centered”和“large-centered”类，它们按预期工作，但有一句话说

如果没有被大版本覆盖，小版本将执行所有断点。

对我来说，这听起来像是我需要创建一个类来覆盖大型显示器上“小中心”类的中心对齐，或者存在一个类 - 我找不到。

这是我正在测试的一些示例代码：

<div class="row">
    <div class="large-2 columns">
        <span>text</span>
    </div>
    <div class="large-6 columns">
        <span>text</span>
    </div>
    <div class="large-4 columns">
        <span>text</span>
    </div>
</div>

网格系统按预期和预期运行，但我希望所有三列仅在小屏幕上居中对齐。

如果我确实需要创建自己的类和样式，是否有人知道社区可以使用的 SCSS 已经解决了这个问题？

4

3 回答 3

3

事实证明，这是不支持开箱即用的。不过有一个简单的解决方法，那就是按照我在评论中的建议添加覆盖。

@media only screen and (min-width: 48em) {
    .column.large-left,
    .columns.large-left { 
        float: left !important; 
    }        
}

请注意，使用em它是基金会标准的做事方式。那应该解决这个smal-centered问题。然后，您只需将该类添加到small-centered您不希望居中的任何元素。您可以在这里看到它的实际效果。

于 2013-04-17T14:48:14.533 回答
3

你不能用 Foundation 非语义类来做到这一点。

您必须手动并且（希望）在语义上执行此操作： 

@media only screen and (max-width: 767px) {
  .some-container { text-align: center; }
}
于 2013-04-17T14:15:12.853 回答
0

您需要检查 CSS 文件并搜索仅适用于小屏幕的媒体查询，然后为该特定列添加属性。

于 2013-04-17T06:38:53.110 回答