Foundation 框架通过 grid-x 与 cell 类结合表单元素，实现响应式布局；small-12 和 medium-6 控制移动端堆叠与桌面端并排；配合 .form、.horizontal 提升一致性，.auto 与 .shrink 优化空间分配，确保输入框与按钮在各设备上良好显示。
Foundation 框架通过其强大的 Grid 系统与表单控件类的结合，让表单元素在不同设备上都能实现良好的自适应布局。使用 Foundation 的 input 类配合 grid 结构，可以轻松控制输入框、标签、按钮等在响应式环境下的排列方式。
使用 Grid 布局划分表单区域
Foundation 的网格系统基于 flex 实现，支持从小屏到大屏的平滑适配。将表单内容放入 row 和 columns 中，能有效控制控件宽度和排列。
示例：将两个输入框并排显示在桌面端，移动端堆叠
在这个结构中，small-12 表示在小屏幕上占满整行，medium-6 表示在中等及以上屏幕各占一半宽度，实现自适应分栏。
使用表单专用类优化控件样式
Foundation 提供了如 .form、.horizontal 等表单容器类，可进一步提升布局一致性。
立即学习“前端免费学习笔记（深入）”；
例如：创建左右对齐的水平表单
通过控制 label 和 input 所在列的宽度，实现类似“两栏对齐”的专业表单样式，在小屏下自动堆叠为上下结构。
增强输入控件的响应式表现
除了结构布局，还可以结合 Foundation 的表单类来统一输入框外观：
- .primary、.success 等状态类可用于按钮或输入提示
- 使用 .auto 列宽让某个输入框自动填充剩余空间
- 通过 .shrink 固定按钮宽度，其余输入框伸缩适配
这种组合在窄屏下依然保持良好可用性，输入框收缩，按钮保持最小操作尺寸。
基本上就这些。用好 Foundation 的 grid-x + cell 类搭配表单元素，再辅以语义化的列宽控制，就能实现既美观又实用的自适应表单布局。关键在于理解 cell 在不同断点下的行为，灵活分配空间。不复杂但容易忽略细节。
