我刚开始使用Foundation 4（来自Bootstrap）。有一些我无法理解的概念，在他们的文档中没有任何解释的迹象：
我有以下内容：
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
我真的无法理解小2和大4 组合的意思。在bootstrap中只有span *所以我猜small-*是相同的，但是large-*呢？大型代表什么？在我看来，我可以省略其中一个，只有large-*或small-*。
另外，columns班怎么样？如果其他类已经定义了“span”，为什么我甚至需要呢？
提前致谢。
答案 0 :(得分：7)
使用' small '和' large '可以为小尺寸屏幕定义列结构，为大尺寸屏幕定义一个列结构。因此，在上面的设置中，当您在大屏幕中查看时，您会看到四列，而当它们很小时，您会看到两列。
e.g。
大
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------------------------------------------
| | | |
| div1 | div2 | div3 |
| | | |
-----------------------------------------------------------------------
小
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------
| | | |
| div1 | div2 | div3 |
| | | |
-----------------------------------
如果您只使用' large - ＃'并省略' small - ＃'值，则在小屏幕上查看时，默认为12列，基本上与编写 small-12 large-4 相同。
如果您只使用' small - ＃'并在所有屏幕尺寸上查看时省略' large - ＃'值，则会使用'小 - ＃'值。
'列'类将div定义为列。如果你没有定义' small - ＃'或' large - ＃'，它会将div设置为100％宽度（即12列）。
基金会还使用'行'。
如果你在'行'div中包含一组'列'div，所有'列'div将尝试坐在同一行上，如果一行中定义的列总数超过12，则它们将换行。如果列总数小于12，那么列将不会换行。
2行
<div class="row">
<div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
<div class="small-2 large-4 columns end" style="background-color:lightgrey">...</div>
</div>
<div class="row">
<div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
<div class="small-2 large-4 columns end" style="background-color:lightgrey">...</div>
</div>
大
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------------------------------------------
| | | |
| div1 | div2 | div3 | (row 1)
| | | |
-----------------------------------------------------------------------
-----------------------------------------------
| | |
| div1 | div2 | (row 2)
| | |
-----------------------------------------------
小
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------
| | | |
| div1 | div2 | div3 | (row 1)
| | | |
-----------------------------------
-----------------------
| | |
| div1 | div2 | (row 2)
| | |
-----------------------
现在有1行
<div class="row">
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns end" style="background-color:lightgrey">. . .</div>
</div>
大 - 大于12的1行列，因此它们换行
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------------------------------------------
| | | |
| div1 | div2 | div3 |
| | | |
-----------------------------------------------------------------------
| | |
| div4 | div5 |
| | |
-----------------------------------------------
小 - 1行列小于12，没有包装
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------------------------------
| | | | | |
| div1 | div2 | div3 | div4 | div5 |
| | | | | |
-----------------------------------------------------------
希望这有帮助。
注意：如果不按照上述布局使用12列，则需要将类“ end ”添加到行的最后一列，以使其浮动左边是最后一列默认浮动。
e.g。
<div class="row">
<div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
</div>
没有最终类看起来像这样：
大
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
----------------------- ------------------------
| | | |
| div1 | | div2 |
| | | |
----------------------- ------------------------
小
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
----------- ------------
| | | |
| div1 | | div2 |
| | | |
----------- ------------