zurb-foundation - Zurb 基金会 4 不工作

Question

使用 Zurb 基础版本 3，如果我包含 Foundation.css 文件，我就可以制作网格等。

对于版本 4，如果我以相同的方式做所有事情，它就不起作用。

我错过了什么？

Answer 1

如果我以同样的方式做每一件事

V4 中有用于网格的新类。您不能只说four columns，而是指定列是用于大视图/设备还是小视图/设备。因此，您需要拥有small-X或div 需要消耗的列数large-X在哪里。X这是一个例子：

<div class="row">
    <div class="ten columns centered">
        <h1>This grid won't work on V4</h1>

        <div class="row">
            <div class="four columns">
                <div class="panel">
                    <p>Left panel</p>
                </div>
            </div>
            <div class="four columns">
                <div class="panel">
                    <p>Center panel</p>
                </div>
            </div>
            <div class="four columns">
                <div class="panel">
                    <p>Right panel</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="ten columns centered">
        <h1>But this will...</h1>
        <div class="row">
            <div class="small-2 large-4 columns">
                <div class="panel">
                    <p>Left panel</p>
                </div>
            </div>
            <div class="small-4 large-4 columns">
                <div class="panel">
                    <p>Center panel</p>
                </div>
            </div>
            <div class="small-6 large-4 columns">
                <div class="panel">
                    <p>Right panel</p>
                </div>
            </div>
        </div>  
    </div>        
</div>

注意单个 div 上的 small 和 large 的组合。它告诉您的是，左侧面板在小型设备（手机）上只有两列，在大型设备（如台式机）上只有四列。同样，右侧面板在小型设备上为六列，在大型设备上为四列。您可以通过使用浏览器的大小来查看差异。

要获取有关 V4 Grid 如何工作的更多信息，请访问此页面。