bootstrap-select-rails 不适用于 bootstrap 4答案

【问题标题】：bootstrap-select-rails not working with bootstrap 4bootstrap-select-rails 不适用于 bootstrap 4
【发布时间】：2019-05-12 16:25:21
【问题描述】：

我正在使用 Bootstrap 4 和 bootstrap-select-rails 选择器设置一个新项目。 selectpicker 不起作用，无法解析正确的样式。选择器应该是这样的：https://developer.snapappointments.com/bootstrap-select/examples/

相反，它会像不包含 selectpicker gem 一样提供无样式版本。就像在下页的第 1 节中一样：

https://bootstrapbay.com/blog/useful-bootstrap-4-select-picker-for-your-forms/

我认为我正确安装了所有必要的依赖项（popper.js、jquery 等）

我尝试使用多个版本的 bootstrap-select-rails gem 并尝试通过两种建议的方法包含 selectpicker：

通过js：

$(document).ready(function() {
    $('.selectpicker').selectpicker();
});

通过将 selectpicker 类添加到表单域

<%= f.input :use_standard_steps, label: 'Select input test', as: :select, collection: ['a','b','c'], required: false, input_html: { class: "selectpicker", multiple: true } %>

以下是我的 gemfile 的副本：

ruby '2.5.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# gem 'sqlite3'
gem 'bootsnap', '>= 1.1.0', require: false
gem 'bootstrap', '~> 4.1.3'
gem 'bootstrap-select-rails', '~> 1.3.0.1'
gem 'bootstrap4-datetime-picker-rails'
gem 'coffee-rails', '~> 4.2'
gem 'devise', '~> 4.6.2'
gem 'factory_bot_rails'
gem 'faker', '1.9.1' # Create fake database data
gem 'font-awesome-sass', '~> 5.6.1'
gem 'jbuilder', '~> 2.5'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'jquery-ui-rails', '~> 6.0.1'
gem 'momentjs-rails', '~> 2.20.1'
gem 'pg', '~> 1.1.4'
gem 'popper_js', '~> 1.14.5'
gem 'puma', '~> 3.11'
gem 'sass-rails', '~> 5.0'
gem 'simple_form', '~> 4.1'
gem 'turbolinks', '~> 5'
gem 'uglifier', '>= 1.3.0'
gem 'webpacker', '~> 4.x'

我的 application.js 的副本

//= require rails-ujs
//= require jquery
//= require jquery-ui
//= require popper
//= require bootstrap
//= require moment
//= require moment/nl.js
//= require tempusdominus-bootstrap-4.js
//= require bootstrap-sprockets
//= require bootstrap/alert
//= require bootstrap/dropdown
//= require bootstrap-select
//= require activestorage
//= require turbolinks
//= require_tree .

还有一份我的 application.css.scss

@import "jquery-ui";
@import "bootstrap";
@import 'bootstrap-select';
@import "tempusdominus-bootstrap-4.css";
@import "custom";
@import "general";
@import "font-awesome-sprockets";
@import "font-awesome";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Raleway');

Chrome Inspect 显示 Bootstrap-selectpicker css 包含在我的 HEAD 中

有人可以指出我的设置中的缺陷吗？

【问题讨论】：

尝试在您的 applications.js 文件中引导之前移动 jquery 和 jquery-ui。
@hashrocket，谢谢，我试过了，但不幸的是没有区别。对 application.css.sccs 也做了同样的事情。结果相同
用 $(document).ready 代替 $(document).on('turbolinks:load', function() {})
嘿伙计，谢谢！这似乎部分解决了问题。给定的表单是通过 turbolinks 呈现的。当我调用 $('.selectpicker').selectpicker();从此 js 文件加载下拉列表。但是，它不会改变样式。 i.imgur.com/OL987a9.png 我试图交换我的 application.css.scss 中的项目，但这似乎没有解决问题。
根据 bootstrap-select-rails 的文档：此外，您必须至少需要警报和下拉引导组件。例如，如果使用 bootstrap-sass：//= 需要 bootstrap/alert，//= 需要 bootstrap/dropdown。我在您的 application.js 中没有看到其中任何一个

标签： ruby bootstrap-4 ruby-on-rails-5

【解决方案1】：

我无法通过 bootstrap-select-rails 或更改 application.js 和 application.scss 的顺序来解决问题。我在我的资产中包含了最新版本的 css 和 js 文件。这解决了我的问题。

【讨论】：