Question

我正在使用yii2和bootstrap。

当用select2小部件替换常规输入字段时，它会破坏＆＃34;我的页面布局：

enter image description here

该地区的html代码为：

            <div class="col-md-4">
                <div class="panel panel-primary" style="padding: 10px;">
                    <div class="form-horizontal" role="form">
                        <div class="form-group form-group-sm">
                            <label class="col-sm-4 control-label" for="formGroupInputSmall">Vendor:</label>

                            <div class="col-xs-8">
                                <?php
                                echo $form->field($model, 'vendor_id', ['template' => "{input}"])->widget(Select2::classname(), [
                                    'options' => ['placeholder' => 'Search for a vendor ...'],
                                    'pluginOptions' => [
                                        'allowClear' => true,
                                        'minimumInputLength' => 3,
                                        'ajax' => [
                                            'url' => $url,
                                            'dataType' => 'json',
                                            'size' => Select2::SMALL,
                                            'data' => new JsExpression('function(term,page) { return {search:term}; }'),
                                            'results' => new JsExpression('function(data,page) { return {results:data.results}; }'),
                                        ],
                                        'initSelection' => new JsExpression($initScript)
                                    ],
                                ]);
                                ?>
                                <!--                                    <input class="form-control" type="text" id="formGroupInputSmall"-->
                                <!--                                           placeholder="please enter vendor">-->
                            </div>
                        </div>
                        <div class="form-group form-group-sm">
                            <label class="col-sm-4 control-label" for="formGroupInputSmall">Vendor PO
                                Number:</label>

                            <div class="col-xs-8">
                                <input class="form-control" type="text" id="formGroupInputSmall"
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group form-group-sm">
                            <label class="col-sm-4 control-label" for="formGroupInputSmall">Vendor Inv. No:</label>

                            <div class="col-xs-8">
                                <input class="form-control" type="text" id="formGroupInputSmall" placeholder="">
                            </div>
                        </div>
                        <div class="form-group form-group-sm">
                            <label class="col-sm-4 control-label" for="formGroupInputSmall">Vendor Inv.
                                Date:</label>

                            <div class="col-xs-8">
                                <input class="form-control" type="text" id="formGroupInputSmall"
                                       placeholder="12/18/2014">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

如何更改select2上的样式，使其再次适合我的布局？

Answer 1

有类似的问题（不是使用Select2，而是使用另一个Krajee小部件）。对我来说固定的是将每一行放在

中

<div class="row">
    Label
    Input
</div>

Answer 2

您应该尝试使用最新版本的Select2 plugin并更新。

此外，您似乎使用ActiveForm可能使用水平引导程序表单布局。引导样式经过优化，可与kartik\widgets\ActiveForm *num一起使用。

Yii2 Krajee Select2插件格式

2 个答案: