Foundation 网格 – 水平堆叠

在 Foundation 框架中，网格系统 采用移动优先的设计理念，默认情况下，列在小型设备上会垂直堆叠，而在中型和大型设备上则水平排列。

水平堆叠的实现：

要在中型和大型设备上使列水平排列，可以使用 medium 或 large 类来指定列的宽度。

示例：

<div class="row">
  <div class="medium-6 columns" style="background-color:yellow;">
    <p>第一列</p>
  </div>
  <div class="medium-6 columns" style="background-color:pink;">
    <p>第二列</p>
  </div>
</div>

在上述示例中：

• .medium-6：表示在中型设备上，每个列占据 6 列宽度，即 50% 的宽度。
• .columns：表示这是一个列元素。

注意事项：

• 在小型设备上，列会自动垂直堆叠，占据 100% 的宽度。
• 在中型和大型设备上，列会水平排列，占据指定的宽度。
• 确保每行的列宽度总和不超过 12，以保持布局的正确性。

有关更多信息和示例，请参阅 Foundation 官方文档中的网格部分。