1

我刚刚开始使用 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>

我真的无法理解 small-2 和 large-4 的组合是什么意思。在引导程序中只有 span* 所以我猜small-*是一样的，但是呢large-*？大号代表什么？在我看来，我也可以省略两者之一，而只有large-*or small-*。

还有，columns课怎么办？如果其他类已经定义了“跨度”，为什么我什至需要它？

提前致谢。

4

1 回答 1

7

使用“小”和“大”，您可以为小尺寸屏幕定义一个列结构，为大尺寸屏幕定义一个列结构。因此，在上面的设置中，当在大屏幕中查看时，您会看到四列，而在小屏幕中，您会看到两列。

例如

大的

|  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-# ”值，它将使用“ small-# ”值。

' column ' 类将 div 定义为列。如果您没有定义“ small-# ”或“ large-# ”，它会将 div 设置为 100% 宽度（即 12 列）。

Foundation 也使用“行”。

如果将一组 ' column ' div 包装在一个 ' row ' div 中，所有的 ' column ' 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 ”添加到行中的最后一列，使其向左浮动，因为最后一列默认向右浮动。

例如 

<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    |
|         |                                                |          |
-----------                                                ------------
于 2013-07-03T09:04:44.213 回答