本文介绍在 Laravel Backpack 的 CRUD 表单中，通过配置 wrapper 属性将两个字段置于同一 Bootstrap 行内（如“Template”与“Page Name”并排显示），提升表单空间利用率与用户体验。
本文介绍在 laravel backpack 的 crud 表单中，通过配置 `wrapper` 属性将两个字段置于同一 bootstrap 行内（如“template”与“page name”并排显示），提升表单空间利用率与用户体验。
在 Backpack for Laravel 中，默认情况下每个字段独占一行（即 col-12），但实际业务中常需优化表单密度——例如将关联性强、长度适中的字段（如「标题」与「状态」、「开始时间」与「结束时间」、「模板」与「页面名称」）并排展示。这不仅能节省垂直空间，还能增强表单逻辑分组的视觉一致性。
实现方式非常简洁：只需为需要并排的字段分别添加 wrapper 配置，指定其 Bootstrap 栅格类即可。推荐使用响应式类如 col-md-6，确保在中等及以上屏幕宽度下两字段平分一行（各占 6 列），而在小屏幕（如手机）自动堆叠为单列，保障移动端可用性。
✅ 示例：在 setupCreateOperation() 或 setupUpdateOperation() 中定义字段：
CRUD::field('template')->wrapper(['class' => 'form-group col-md-6']);
CRUD::field('page_name')->wrapper(['class' => 'form-group col-md-6']);⚠️ 注意事项：
- 必须成对设置：仅设置一个字段的 wrapper 不会自动对齐；两个（或多个）字段需统一使用兼容的栅格类（如 col-md-6 + col-md-6，或 col-md-4 + col-md-8）。
- 避免 row 容器冗余：Backpack 的表单默认已包裹在 .row 内，因此无需手动添加 <div class="row"> —— 直接为字段指定 col-* 类即可由 Bootstrap 自动完成弹性布局。
- 兼容性提示：该方法适用于 Backpack v5.x（含 5.0–5.8+），且要求项目启用 Bootstrap 5（默认集成）。若使用自定义主题或旧版 Bootstrap，请校验栅格系统语法是否一致。
- 进阶扩展：如需三等分（如「年」「月」「日」），可设为 col-md-4；如需左侧宽、右侧窄（如长文本输入+短选择框），可组合 col-md-8 / col-md-4。
? 小结：wrapper['class'] 是 Backpack 控制字段呈现层最轻量、最灵活的机制之一。它不侵入字段逻辑，不依赖额外包，仅通过语义化 CSS 类即可实现专业级表单布局。善用此特性，能让后台界面更紧凑、更直观，同时保持代码清晰可维护。
