css - Kartik fileInput CSS 覆盖其他样式表

Question

我有一个包含 kartik fileInput 的表单。这是我的表单的样子:

<?php $form = ActiveForm::begin([
                    'id' => 'login-form',
                    'layout' => 'horizontal',
                    'fieldConfig' => [
                    'horizontalCssClasses' => [
                        'label' => 'col-sm-4',
                        'offset' => 'col-sm-offset-2',
                        'wrapper' => 'col-sm-15'
                      ],
                  ],
                ]); ?>
                <div class="form-label-group">
                  <?= $form->field($model, 'model')->textInput(['autofocus' => true, 'class' => 'form-control', 'id' => 'inputEmail'])->label('PHONE MODEL:') ?> 
                </div>
                <div class="form-label-group">
                  <?= $form->field($model, 'name')->textInput(['class' => 'form-control', 'id' => 'inputEmail'])->label('PHONE MODEL NAME:') ?> 
                </div>
                <div class="form-label-group">
                  <?= $form->field($model, 'price')->textInput(['class' => 'form-control', 'id' => 'inputEmail'])->label('PRICE:') ?> 
                </div>
                <div class="form-label-group">
                  <?= $form->field($model, 'description')->textarea(['class' => 'form-control', 'id' => 'inputEmail'])->label('DESCRIPTION:') ?> 
                </div>
                        <?php echo $form->field($model, 'file[]')->widget(FileInput::classname(), [
                            'options' => ['accept' => 'image/*','multiple' => true]
                        ]); ?>
                <?= Html::submitButton('ADD', ['class' => 'btn btn-lg btn-block add-btn mt-4']) ?>
                <?php ActiveForm::end(); ?>

我的 Kartik CSS/JS 与我的其他样式表位于同一资源中。这是我的 Assets :

<?php

namespace app\assets;
use yii\web\AssetBundle;

class DashboardAsset extends AssetBundle 
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [ 
    'css/dashboard/c3.min.css',
    'css/dashboard/dashboard1.css',
    'css/dashboard/morris.css',
    'css/dashboard/style.css',
    '//fonts.googleapis.com/css?family=Lobster&display=swap',
    // Kartik fileInput
    'css/kartik-fileInput/fileinput.css',
    'css/kartik-fileInput/theme.css'
]; 
public $js=[
    'js/dashboard/bootstrap.min.js',
    'js/dashboard/c3.min.js',
    'js/dashboard/custom.min.js',
    'js/dashboard/d3.min.js',
    'js/dashboard/dashboard1.js',
    'js/dashboard/jquery-3.2.1.min.js',
    'js/dashboard/jquery.sparkline.min.js',
    'js/dashboard/morris.min.js',
    'js/dashboard/perfect-scrollbar.jquery.min.js',
    'js/dashboard/popper.min.js',
    'js/dashboard/raphael-min.js',
    'js/dashboard/sidebarmenu.js',
    'js/dashboard/waves.js',
    // Kartik fileInput
    'js/kartik-fileInput/file.js',
    'js/kartik-fileInput/es.js',
    'js/kartik-fileInput/fileinput.js',
    'js/kartik-fileInput/fr.js',
    'js/kartik-fileInput/piexif.js',
    'js/kartik-fileInput/sortable.js',
    'js/kartik-fileInput/theme.js',
    'js/kartik-fileInput/theme2.js'
];

//if this asset depends on other assets you may populate below array
public $depends = [
];
}

问题是当我回显 fileInput 时，它弄乱了整个表单的 CSS。发表评论后 <?php echo $form->field($model, 'file[]')->widget(FileInput::classname(), ['options' => ['accept' => 'image/*','multiple' => true]]); ?>部分，样式恢复正常。我该如何解决这个问题，使 fileInput 不会覆盖自定义 CSS？

这是我的表单在添加 fileInput 小部件之前/之后的样子。

之前:https://imgur.com/wAdgeHz之后:https://imgur.com/yqe8yM8

Answer 1

尝试设置

Yii::$app->params['bsDependencyEnabled'] = false

在您的 params.php 文件中。这将阻止加载 Bootstrap css 和 js Assets 文件。

来源:http://demos.krajee.com/widget-details/fileinput#override-bootstrap-cssjs