时间戳

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

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

问题描述

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

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

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

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

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

然后我使用composer require ttskch/select2-bootstrap4-theme命令来安装更好的引导程序。

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();

引导程序.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) {}

应用程序.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>

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

标签： laravelbootstrap-4jquery-select2laravel-mix

解决方案

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

在GitHub 页面上，用法被描述为：

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

所以我不知道，为什么它不起作用，更奇怪的是，如果不指定主题，它怎么能很好地为我工作。这对我来说是火箭科学。

推荐阅读