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