时间戳

首页 > 解决方案 > Yii2 Boostrap ActiveForm 水平布局

yii2 - Yii2 Boostrap ActiveForm 水平布局

问题描述

下午好，

我是编程新手，很难用 Bootstrap 理解 Yii2 布局。

我所追求的真的很简单，所以我想，但我似乎无法让它远程工作。我想在每个输入前面创建一个带有标签的水平表单，并且能够控制每个输入的宽度。

在我当前的代码中，我有 2 个简单字段，我希望第一个跨越表单的一半（col-md-6），第二个应该跨越整个表单（col-md-12），但这不起作用，我不明白为什么我正在努力解决它。

下面是我的看法

<?php
use yii\helpers\Html;
use yii\helpers\ArrayHelper;;
use yii\bootstrap\ActiveForm; //used to enable bootstrap layout options

/* @var $this yii\web\View */
/* @var $model backend\models\Projects */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="projects-form">
<?php 
    $form = ActiveForm::begin([
        'id'=>$model->formName(),
        'layout' => 'horizontal',
        'class' => 'form-horizontal',
        'fieldConfig' => [
            'enableError' => true,
        ]
    ]); 
?>

<h2>Project Information</h2>
<h3>General Information</h3>
<div class="form-group row">
    <div class="col-md-6">
        <?php
            echo $form->field(
                $model, 
                'ProjNo'
            )->textInput(['maxlength' => true]); 
        ?>
    </div>
    <div class="col-md-6">
    </div>
</div>
<div class="form-group row">
    <div class="col-md-12">
        <?php
            echo $form->field(
                $model, 
                'ProjName'
            )->textInput(['maxlength' => true]); 
        ?>
    </div>
</div>
<p></p>
<p></p>
<?php
ActiveForm::end();
?>
</div>

这是_form在创建和更新视图中调用的视图。

我不太明白为什么标签对齐方式不一致，因为我为整个字段指定了不同的宽度，为什么即使我指定col-md-12了 （根据我的理解应该是全宽），它似乎只需要大约一半可用宽度。

任何帮助是极大的赞赏！

谢谢你。

当前生成的示例

我只希望标签对齐并能够拥有不同宽度的字段。在上面，当我更改类时，标签会更改对齐方式。

标签： yii2

解决方案

您可以使用template下面的表单选项下的fieldConfig选项来指定输入、标签和错误块的顺序，这些设置将在整个表单中应用于所有输入，在下面的配置中，我将标签放在输入之后如果你愿意，你可以改变它。

$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
            'layout' => 'horizontal' ,
            'class' => 'form-horizontal' ,
            'fieldConfig' => [
                'enableError' => true ,
                'template' => '{input}{error}{label}',
    ] ] );

你可以用 div包裹{label}and{input}

'template' => '<div class="col-sm-6">{input}{error}</div>
               <div class="col-sm-3">{label}</div>',

HTML并从您的视图中删除所有额外的内容，只需将其包裹$form->field()起来，row请参见下文

$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
                'layout' => 'horizontal' ,
                'class' => 'form-horizontal' ,
                'fieldConfig' => [
                    'enableError' => true ,
                    'template' => '<div class="col-sm-6">{input}{error}</div>{label}',
        ] ] );
?>

<h2>Project Information</h2>
<h3>General Information</h3>
<div class="row">
        <?php
        echo $form->field (
                $model , 'ProjNo'
        )->textInput ( [ 'maxlength' => true, ] );
        ?>
</div>
<div class="row">
        <?php
        echo $form->field (
                $model , 'ProjName'
        )->textInput ( [ 'maxlength' => true, ] );
        ?>
</div>

EDIT

根据讨论，您不需要相同对齐的标签和输入，而是希望每行中的变量输入和标签，为此，您需要分别配置输入字段的模板部分，如果我理解正确，它可以如下所示

在此处输入图像描述

您应该像下面一样配置表单选项和字段选项，并通过手动分配template标签来删除标签上应用的额外类col-sm-3control-label

$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
            'layout' => 'horizontal' ,
            'class' => 'form-horizontal' ,
            'fieldConfig' => [
                'enableError' => true ,
                'options' => [
                    'class' => ''
                ]
    ] ] );
?>
<h2>Project Information</h2>
<h3>General Information</h3>
<div class="row">
    <?php
    echo $form->field (
            $model , 'name' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-4">{input}{error}</div>' , ]
    )->textInput ( [ 'maxlength' => true ] )->label ( null , [ 'class' => 'control-label' ] )
    ?>
    <?php
    echo $form->field (
            $model , 'price' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-4">{input}{error}</div>' , ]
    )->textInput ( [ 'maxlength' => true ] )->label ( null , [ 'class' => 'control-label' ] );
    ?>

</div>
<div class="row">
    <?php
    echo $form->field (
            $model , 'product_subcategory' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-10">{input}{error}</div>' , ]
    )->textInput ( [ 'maxlength' => true , ] )->label ( null , [ 'class' => 'control-label' ] );
    ?>
</div>
<?php
echo yii\bootstrap\Html::submitButton ( 'Submit' );
yii\bootstrap\ActiveForm::end ();

希望这可以帮助你

推荐阅读