Question

使用Zurb基础版本3，如果我包含了foundation.css文件我能够制作网格等。

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

我错过了什么？

Answer 1

如果我以同样的方式做所有事情

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

<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上的小和大的组合。它告诉你的是，左侧面板在小型设备（手机）上只有两列，在大型设备上只有四列，例如在桌面上。同样，右侧面板在小型设备上为六列，在大型设备上为四列。您可以通过播放浏览器的大小来查看差异。

要获取有关V4网格如何工作的更多信息，请go to this page。

Zurb Foundation 4无法正常工作

1 个答案: