如何并排布局yii2表单字段答案

【问题标题】：How to layout yii2 form fields side by side如何并排布局yii2表单字段
【发布时间】：2016-06-11 16:06:32
【问题描述】：

我想将 Yii2 中的表单域并排放置在 2x2 网格中。

我正在使用 bootstrap/ActiveForm

    <?php $form = ActiveForm::begin([
    'layout' => 'horizontal',
    'action' => ['index'],
    'method' => 'get',
    'fieldConfig' => [
        'horizontalCssClasses' => [
            'label' => 'col-sm-2',
            'offset' => 'col-sm-offset-2',
            'wrapper' => 'col-sm-4',
        ],
    ],
]); ?>

字段基本上是一系列日期小部件

<?= $form->field($model, 'saleFrom')->widget(DatePicker::className(), [
    'options' => ['placeholder' => 'TO'],
    'pluginOptions' => [
        'autoclose' => true,
        'format' => 'yyyy-mm-dd'
    ]
]); ?>

然而，所有成功的做法是将所有四个字段对齐到 div 的左侧 - 我无法从文档中弄清楚如何使用 Yii2 选项来执行此操作，而无需手动添加自定义 css。

【问题讨论】：

标签： yii yii2

【解决方案1】：

您只需将表单列包装在另一个引导程序 row 中。

<?php $form = ActiveForm::begin([
    'layout' => 'horizontal',
    'action' => ['index'],
    'method' => 'get',
    'fieldConfig' => [
        'horizontalCssClasses' => [
            'label' => 'col-sm-2',
            'offset' => 'col-sm-offset-2',
            'wrapper' => 'col-sm-4',
        ],
    ],
]); ?>
    <div class="row">
        <div class="col-md-6">
            <?= $form->field($model, 'firstname') ?>
            <?= $form->field($model, 'lastname') ?>
       </div>
        <div class="col-md-6">
            <?= $form->field($model, 'email') ?>
            <?= $form->field($model, 'bla') ?>
       </div>
    </div>
<?php ActiveForm::end() ?>

【讨论】：

这不起作用，因为 yii2 标记添加了自己的引导程序——这就是为什么我需要了解 yii2 对引导程序的使用
当然确实有效——你试过了吗？ Yii 只为form-group 创建标记。您可以根据需要将这些嵌套在网格列中。在我的项目中，我经常这样做。
好吧，我确实尝试过，它几乎没有改变
那你肯定已经搞砸了。刚刚使用全新的 Yii 应用模板再次尝试。我已经更改了登录表单 - 就像一个魅力。
如果这不起作用，那么你又把你的网格弄乱了，例如忘了开始一个新的row 和col-... 什么的。您可以随意nest 列。只要你不破坏引导程序的网格，我展示的解决方案总是有效的。这一切都与 Yii 无关，因为 Yii 在这方面没有做任何特别的事情。

【解决方案2】：

您可以使用引导网格来构建您喜欢的布局

<div class="site-index">
    <div class="body-content">
        <div class='col-sm-6 col-md-6' id='id'>
        <?php 
                $form1 = ActiveForm::begin([
                    'layout' => 'horizontal',
                    'action' => ['index1'],
                    'method' => 'get',
                    'fieldConfig' => [
                        'horizontalCssClasses' => [
                            'label' => 'col-sm-2',
                            'offset' => 'col-sm-offset-2',
                            'wrapper' => 'col-sm-4',
                        ],
                    ],
                ]); 

                ... 
        ?>

        </div>
        <div class='col-sm-6 col-md-6' id='id2'>

                $form2 = ActiveForm::begin([
                    'layout' => 'horizontal',
                    'action' => ['index2'],
                    'method' => 'get',
                    'fieldConfig' => [
                        'horizontalCssClasses' => [
                            'label' => 'col-sm-2',
                            'offset' => 'col-sm-offset-2',
                            'wrapper' => 'col-sm-4',
                        ],
                    ],
                ]); 

                ... 
        </div> 
    </div>
</div>

【讨论】：

我不想要 2 个 activeforms，我需要 1 个网格中有四个字段。我认为 yii 可以选择在 activeform 中执行此操作，而不必设置引导 div？
这个有扩展.. 但我认为带有引导程序的简单网格通常非常方便