Foundation 网格 – 水平堆叠

Foundation 网格 – 水平堆叠

以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。

.small|medium|large-* 类中的数字指定了跨越的列数。所以， .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 (50% 宽度) 等。

其实 当超过某个分辨率后 每一列会自动换行的。

也就是我们上一节中 就算改为这样子

  <div class="row">
        <div class="medium-3 columns">
            中医药管理局：整治打着中医旗号的养生保健服务乱象
        </div>

        <div class="medium-3 columns">
            国家市场监管总局：2019年将加快境内审批境外已上市新药
        </div>

        <div class="medium-3 columns">
            分析师观点｜中国股市需要华为精神
        </div>
    </div>Code language: HTML, XML (xml)

其实我们平常吧medium 也当成pc 平板来用就可以了 也就是 不需要使用large 只有small、和medium就可以

另外 之所以没有设置小型设备手机端的样式 small 也可以自动换行 主要原因是

<meta name="viewport" content="width=device-width, initial-scale=1">Code language: HTML, XML (xml)