Symfony 4 - 使用带有 Select2 的 bootstrap 4答案

【问题标题】：Symfony 4 - Use bootstrap 4 with Select2Symfony 4 - 使用带有 Select2 的 bootstrap 4
【发布时间】：2020-02-21 21:30:27
【问题描述】：

在我的 symfony 4 项目中，我将 Select2 用于我的一些字段：https://select2.org/

所以，我有这个：

所以，以我的形式，我：

->add('user', EntityType::class, [
                'class' => User::class,
                'label' => 'Agent',
                'placeholder' => "Agent",
                'choice_label' => 'fullName',
                'choice_value' => 'fullName',
                'attr' => [
                    'class' => 'js-example-basic-single',
                ]
            ])

在我看来：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

<script>
        $('.js-example-basic-single').select2({
            placeholder: 'Choisissez un agent',
            allowClear: true,
            language: 'fr'
            });
    </script>

我想在此字段中使用 bootstrap 4，使其具有与其他字段相同的设计。

所以，我找到了这个链接：https://github.com/ttskch/select2-bootstrap4-theme 这是一个很好的链接吗？

我是第一次使用npm，所以我执行了以下命令：

npm install @ttskch/select2-bootstrap4-theme

但我没有看到 css 链接在哪里，在我的视图中导入它们

【问题讨论】：

标签： javascript php css symfony jquery-select2

【解决方案1】：

您只需在 select2 字段定义中传递正确的主题名称。所以在你的情况下，它看起来像这样：

 <script>
        $('.js-example-basic-single').select2({
            placeholder: 'Choisissez un agent',
            allowClear: true,
            language: 'fr',
            theme: 'bootstrap4',
            });
    </script>

如果您按照官方文档的建议使用 webpack，则应添加以下行：

assets/js/app.js

require('select2');

assets/css/app.scss：

@import "~select2-bootstrap4-theme/dist/select2-bootstrap4.min.css";

【讨论】：