Foundation v6 响应式需同时满足 CSS+JS+viewport+正确HTML结构四要素，缺一则失效；.columns 在 small 断点默认 width:auto 而非 100%，需显式写 small-12 才占满；show-for-small 等类依赖 JS 初始化，未调用 $(document).foundation() 则无效。
Foundation v6 的响应式页面不是“引入 CSS 就能跑”，必须同时满足 CSS + JS + viewport + 正确 HTML 结构四要素，缺一就会在小屏不堆叠、show/hide 类失效、网格错位。
为什么只引 foundation.min.css 后手机上列不占满？
因为 Foundation 的 .columns 在 small 断点下默认是 width: auto，不是 100% —— 这是设计选择，不是 bug。它允许你在小屏上并排放两个按钮（比如“取消”+“确认”），而不是强制换行。
- 要让列在手机上独占一行，必须显式写
class="columns small-12" - 只写
medium-6而漏掉small-12，小屏下宽度由浏览器流式布局决定，通常不是 100%，结果就是“看起来没响应” -
grid-container必须配合grid-x或grid-y才生效；单独加cell不会触发 Flex 布局
show-for-small 为什么点了没反应？
show-for-small 这类类名依赖 Foundation JS 初始化，不是纯 CSS 控制。它的逻辑是“仅在 Foundation 定义的 small 断点范围（0–639px）内显示”，不是“在小设备上显示”。未调用 $(document).foundation()，这些类完全无效。
- 确保
foundation.min.js在jQuery之后加载，且初始化代码放在DOMContentLoaded或$(function() { ... })内 -
hide-for-xlarge-only这种带only的类，只在xlarge断点隐藏，其余全部显示——不是“仅在此断点隐藏” - 自定义断点后（比如改了
$breakpoints），JS 内部仍按默认值计算，会导致show-for-medium失效，必须同步重编译 JS
企业项目中如何避免样式失控？
Foundation 默认不带视觉样式（无按钮颜色、无卡片阴影），所有外观靠 _settings.scss 驱动。直接 CDN 引 foundation.min.css = 基本无法定制，改几个 !important 只会让后续维护更糟。
- 必须走 Sass 流程：
@import 'foundation/scss/settings'→ 覆盖变量（如$button-radius、$global-font-size）→ 再@import 'foundation/scss/foundation' - 只用 Dropdown？别全量引入，改用
@import 'foundation/scss/components/dropdown'，体积减少 70%+ - 若用 Dart Sass，注意
foundation-sites依赖旧版node-sass，否则报错function "rem-calc" not found，得手动补函数或切回node-sass
页脚和表单这类常见模块怎么写才不出错？
页脚和表单看似简单，但 Foundation 对嵌套结构敏感。常见翻车点是把 grid-x 和 cell 当成 Bootstrap 的 row/col 平铺使用，结果小屏错位、间距丢失。
- 页脚必须用 ，漏掉任一层，...>
cell的断点类就失效- 响应式表单字段并排：用
包裹，每个字段用，不要在input上直接加断点类data-dropdown这类属性只是声明，不执行new Foundation.Dropdown(el)或$(document).foundation()，点击永远没反应最常被忽略的一点：Foundation 的栅格不是 CSS Grid，而是基于 Flexbox + float + 媒体查询的老式实现。当你同时写了
display: grid和grid-container，两者会冲突，“看起来没反应”其实是布局引擎打架。企业项目里，要么彻底用原生 Grid，要么老老实实走 Foundation 的grid-x路线，混用必踩坑。 - 响应式表单字段并排：用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
