Question

我正在使用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类添加到formfield

<%= 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显示我的HEAD中包含了Bootstrap-selectpicker CSS

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

Answer 1

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

bootstrap-select-rails无法与bootstrap 4一起使用

1 个答案: