本文介绍如何在 Backpack for Laravel 的 Create/Update 表单中，将两个字段并排显示于同一 Bootstrap 行内（如“Template”与“Page Name”），通过配置 wrapper 属性精准控制字段宽度与栅格布局。
本文介绍如何在 backpack for laravel 的 create/update 表单中，将两个字段并排显示于同一 bootstrap 行内（如“template”与“page name”），通过配置 `wrapper` 属性精准控制字段宽度与栅格布局。
在 Backpack for Laravel 中，默认情况下每个表单字段独占一行（即 col-12）。若需提升表单空间利用率、优化视觉层次（例如将逻辑关联的字段如「标题」与「别名」、「开始时间」与「结束时间」并排展示），可借助字段的 wrapper 属性自定义其外层 HTML 容器的 CSS 类，从而实现灵活的 Bootstrap 栅格布局。
核心方法是为两个目标字段分别设置相同的 wrapper 配置，使其共同撑满一行（总和为 12 列）：
// 在 CrudController 的 setupCreateOperation() 或 setupUpdateOperation() 中
$this->crud->addField([
'name' => 'template',
'label' => 'Template',
'type' => 'text',
'wrapper' => [
'class' => 'form-group col-md-6'
],
]);
$this->crud->addField([
'name' => 'page_name',
'label' => 'Page Name',
'type' => 'text',
'wrapper' => [
'class' => 'form-group col-md-6'
],
]);✅ 效果说明：
- col-md-6 表示在中等及以上屏幕宽度下，每个字段占据 6 列（即半宽），两字段自动并排；
- form-group 保留 Backpack 默认的表单组样式（如间距、响应式行为），确保兼容性；
- 移动端（<md）下自动堆叠为单列，符合 Bootstrap 响应式规范。
⚠️ 注意事项：
- 请勿在 wrapper.class 中省略 form-group —— 它是 Backpack 表单渲染必需的基础类，缺失可能导致样式错乱或 JS 行为异常；
- 若需三等分（如日期+小时+分钟），可改用 col-md-4；四等分则用 col-md-3，但需确保总列数 ≤12；
- 避免对同一行内字段混用不同断点类（如一个 col-sm-6、另一个 col-lg-6），以免响应式行为不一致；
- 所有 wrapper 配置仅影响呈现层，不影响数据验证、存储或后端逻辑。
? 进阶提示：
如需更复杂的布局（如带标签分组的横向表单、嵌套字段容器），可结合 wrapper.element（指定 <div>/<fieldset> 等）或使用 tab / card 布局组件。但对于绝大多数「双字段同行」场景，'wrapper' => ['class' => 'form-group col-md-6'] 是最简洁、稳定且官方推荐的解决方案。
