Foundation v6响应式栅格需同时加载CSS、JS及viewport标签，且JS必须初始化；仅引CSS会导致小屏不堆叠，未调用$(document).foundation()则show/hide类失效，自定义断点须同步Sass与JS。
Foundation 框架本身已停止主版本更新（v6.7 是最后一个大版本），官方推荐迁移到 Foundation for Sites 的维护模式或转向其他现代方案；但若你正维护旧项目、或明确需用 Foundation v6 实现响应式布局，关键不是“怎么引入”，而是“怎么避开默认陷阱、让栅格真能响应”。
如何正确引入 Foundation v6 并启用响应式栅格
Foundation 的响应式能力依赖于完整的 CSS + JavaScript 加载链，缺一不可。仅引入 foundation.min.css 会导致 .row 和 .columns 在小屏下不自动堆叠——因为断点媒体查询和 JS 驱动的增强行为（如 equalizer）被跳过。
- 必须同时加载
foundation.min.css和foundation.min.js（且jQuery要在它之前） -
meta viewport标签不可省： - 不要手动覆盖
$breakpointsSass 变量后只编译 CSS——JS 内部仍按默认断点计算，会导致show-for-medium类失效
为什么 .columns 在手机上没占满一行？
Foundation 默认栅格是“移动优先但非强制堆叠”：.columns 在最小断点（small）下宽度为 auto，仅当显式指定 small-12 才占满。这不是 bug，是设计选择——方便开发者控制小屏下的紧凑排版（比如并排两个按钮）。
- 要让列在所有尺寸下都独占一行，写
class="columns small-12" - 若想“小屏堆叠、中屏并排”，用
class="columns small-12 medium-6" - 漏写
small-X时，浏览器按 CSS 顺序 fallback 到最近的更大数据断点（如只写medium-6，则small下宽度由浏览器默认流式行为决定，通常不是 100%）
如何用 show/hide 类精准控制元素显示状态？
show-for-small 这类类名容易误解：“small” 指的是 Foundation 定义的 small 断点范围（0–639px），而非“小屏幕设备”。它的显示逻辑是“仅在此断点激活时显示”，不是“在小设备上显示”。
