Yii2让ActiveForm的字段水平排列

Yii2让ActiveForm的字段水平排列

Yii2让ActiveForm的字段水平排列

Yii2中的ActiveForm默认是2行显示格式,本文讲述的是如何设置成水平显示风格

为整个表单设置排版

$form = ActiveForm::begin([
     'options' => ['class' => 'form-horizontal'],
     'fieldConfig' => [
         'template' => "<div class='col-xs-3 col-sm-1 text-right'>{label}</div><div class='col-xs-9 col-sm-9'>{input}</div><div class='col-xs-12 col-xs-offset-3 col-sm-2 col-sm-offset-0'>{error}</div>",
     ]]);

其中 {label} {input} {error} 分别代表了每个字段的 名称, 表单元素, 错误信息变量,在为其添加响应式类即可.

大屏效果

大屏效果图

小屏效果

小屏效果

给单个字段设置排版

$form->field($model, 'amout',[
     'template' => '<div class="input-group"><div class="input-group-addon">$</div>{input}<div class="input-group-addon">.00</div></div>',
 ])->input('number',['placeholder' => 'Amount']) ;


参考:http://stuff.cebe.cc/yii2docs/yii-bootstrap-activeform.html


Tags

Back to top