html - Yii2 Krajee Select2 插件格式化

Question

我在 Bootstrap 中使用 yii2。

当用 select2 小部件替换常规输入字段时，它“破坏”了我的页面布局:

该区域的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>