Yii2 Bootstrap ActiveForm水平布局求助：自定义输入框宽度

嘿，我当初刚用Yii2搞表单布局的时候也卡过这个点，其实就是没摸透Yii2 ActiveForm和Bootstrap网格的配合逻辑！咱们直接上解决方法，一步步来实现你要的效果：

核心思路 #

Yii2的ActiveForm水平布局默认会给输入框容器固定列宽，咱们需要自定义字段模板，让每个输入框能单独设置Bootstrap的col-md-*类，同时保持标签在输入框前方的水平结构。

完整代码示例 #

1. 初始化ActiveForm（带自定义字段配置） #

首先启动表单时指定水平布局，并设置基础标签样式：

<?php $form = ActiveForm::begin([
    'id' => 'custom-width-form',
    'layout' => 'horizontal', // 开启水平表单模式
    'fieldConfig' => [
        'labelOptions' => ['class' => 'col-md-2 control-label'], // 标签固定占2列
        'options' => ['class' => 'form-group row'], // 每个字段单独占一行
    ],
]); ?>

2. 第一个字段（占表单宽度一半：col-md-6） #

通过template属性直接定义输入框容器的列宽：

<?= $form->field($model, 'first_field')
    ->textInput(['placeholder' => '我占一半宽度'])
    ->template("{label}\n<div class=\"col-md-6\">{input}\n{error}</div>") ?>

3. 第二个字段（占满整个表单宽度：col-md-12） #

同样修改template里的列类为col-md-12：

<?= $form->field($model, 'second_field')
    ->textInput(['placeholder' => '我占满整行'])
    ->template("{label}\n<div class=\"col-md-12\">{input}\n{error}</div>") ?>

4. 关闭表单 #

<?php ActiveForm::end(); ?>

关键说明 #

• 标签的col-md-2可以根据需求调整（比如改成col-md-3），只要保证输入框列数和标签列数总和在12以内即可（Bootstrap网格是12列布局）。
• 如果不想每个字段重复写template，可以在fieldConfig里用动态参数简化：

  'fieldConfig' => [
      'template' => "{label}\n<div class=\"col-md-{size}\">{input}\n{error}</div>",
      'labelOptions' => ['class' => 'col-md-2 control-label'],
      'options' => ['class' => 'form-group row'],
  ],
  

  之后每个字段只需传递size参数：

  <?= $form->field($model, 'first_field', ['fieldConfig' => ['size' => 6]])->textInput() ?>
  <?= $form->field($model, 'second_field', ['fieldConfig' => ['size' => 12]])->textInput() ?>
  

• 确保项目已正确加载Bootstrap CSS（Yii2的yii\bootstrap\BootstrapAsset默认会注册，检查AppAsset配置即可）。

内容的提问来源于stack exchange，提问作者Still Learning