Question

使用Zurb Foundation并从版本4开始的新功能，我找不到让网格仅在小屏幕上与中心对齐的方法，然后在大屏幕上恢复为默认网格。 Foundation 4是否提供了可以执行此操作的本机类？

我已经看过他们关于http://foundation.zurb.com/docs/components/grid.html的文档，这些文档演示了“以小为中心”和“以大为中心”的类，这些类按预期工作但是有一句话说

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

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

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

<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？

Answer 1

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

你必须手动完成（希望）语义：

@media only screen and (max-width: 767px) {
  .some-container { text-align: center; }
}

Answer 2

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

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

请注意使用em这是基础标准的做事方式。这应该处理smal-centered问题。然后，您只需将该类添加到您不想居中的任何small-centered元素。你可以see it in action here。

Answer 3

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

基础4中心仅在小屏幕上对齐

3 个答案: