如何解决这个 select2 外观问题？（使用 BootStrap 4 和 Laravel 框架）

Question

我正在学习 Laravel 框架，我想使用 Laravel-mix 将 Select2 添加到我的项目中。经过几个小时的尝试，我做到了，一切似乎都很好，除了一个小问题，但非常烦人。

当我点击我的 <select> 时，里面的搜索输入没有聚焦，所以看起来像这样：

好的，还不错，但是当我点击搜索输入时，黑线闪烁不到 0.5 秒：

然后这条线看起来应该是这样（注意第一张图片上该线丢失了）：

我不太确定我应该提供哪几行代码。

我使用 npm i select2 命令安装了 select2。

然后我使用composer require ttskch/select2-bootstrap4-theme命令安装更好看bootstrap。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/datatables.scss', 'public/css')
.sass('resources/sass/app.scss', 'public/css')
.postCss('vendor/ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css', 'public/css')
.postCss('node_modules/select2/dist/css/select2.min.css', 'public/css')
.sourceMaps();

bootstrap.js

try {
window.jQuery = window.$ = require('jquery');
window.Popper = require('popper.js').default;
require('bootstrap');
require('select2');


require( 'jszip' );
require( 'pdfmake' );
require( 'datatables.net-bs4' )();
require( 'datatables.net-buttons-bs4' )();
require( 'datatables.net-buttons/js/buttons.html5.js' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-datetime' )();
require( 'datatables.net-fixedcolumns-bs4' )();
require( 'datatables.net-fixedheader-bs4' )();
require( 'datatables.net-keytable-bs4' )();
require( 'datatables.net-responsive-bs4' )();
require( 'datatables.net-rowgroup-bs4' )();
require( 'datatables.net-rowreorder-bs4' )();
require( 'datatables.net-scroller-bs4' )();
require( 'datatables.net-searchbuilder-bs4' )();
require( 'datatables.net-searchpanes-bs4' )();
require( 'datatables.net-select-bs4' )();
} catch (e) {}

app.js

    jQuery(function () {
    $(".s2").select2({ theme: 'bootstrap4', focus: true });
 });

app.blade.php

<!-- Styles (on the head section)-->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/datatables.css') }}" rel="stylesheet">
<link href="{{ asset('css/select2.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/select2-bootstrap4.min.css') }}" rel="stylesheet">
...
<select class="s2" style="width: 100%" name='choice' required>
    <option value="">Your choice</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</select>
...
<!-- Scripts (at the bottom of page) -->
<script src="{{ asset('js/app.js') }}" ></script>

请帮助我理解我的错误以及如何解决它。我以前从未使用过任何框架，所以在我的其他项目中我只是添加了大约三行代码并且一切正常，但在这里我感到完全迷失了。

Answer 1

嗯，这很奇怪。对我有用的解决方案是从我的 select2 函数中删除 theme: 'bootstrap4'。

在 GitHub page 上，用法被描述为：

    $('select').select2({
    theme: 'bootstrap4',
});

所以我不知道，为什么它不起作用，更奇怪的是，它如何在不指定主题的情况下为我工作得很好。这对我来说是火箭科学。

如何解决这个 select2 外观问题？（使用 BootStrap 4 和 Laravel 框架）

How to resolve this select2 appearance problem? (working with BootStrap 4 and Laravel framework)

laravel

jquery-select2

bootstrap-4

laravel-mix

如何解决这个 select2 外观问题？ （使用 BootStrap 4 和 Laravel 框架）

How to resolve this select2 appearance problem? (working with BootStrap 4 and Laravel framework)

laravel

jquery-select2

bootstrap-4

laravel-mix

如何解决这个 select2 外观问题？（使用 BootStrap 4 和 Laravel 框架）