Question

下午好，

我是编程新手，并努力通过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，这应该是我理解的全宽度，它似乎只占可用宽度的一半左右。

非常感谢任何帮助！

谢谢。

current example of what is generated

我只想让标签排成一行，并且能够拥有不同宽度的字段。在上面，当我更改类时，标签会改变对齐方式。

Answer 1

您可以使用下面表单template选项下的fieldConfig选项来指定输入，标签和错误块的顺序，这些设置将在整个表单中应用于所有输入，在以下配置中，我在输入后放置标签，您可以根据需要更改。

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

您可以将{label}和{input}与div一起打包，如

'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-3类来删除标签control-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 ();

希望这可以帮助你

Yii2 Boostrap ActiveForm水平布局

1 个答案:

`EDIT`