Rails，Chosen，Bootstrap：如何将Bootstrap样式应用于多选字段

Question

轨道：5.2.1

Ruby：2.5.1p57

引导程序：4.1.3

我正在尝试将Bootstrap样式添加到“多选”字段中。

这是我的表格：

<%= simple_form_for person do |f| %>
  <%= f.input :firstname %>
  <%= f.input :lastname %>
  <%= f.input :email %>
  <%= f.input :phone %>
  <%= f.input :tag_list, as: :select, collection: TagList.all, label_method: :name, value_method: :name, input_html: {class: 'chosen-select', multiple: true} %>
  <br>
  <%= f.button :submit %>
<% end %>

“多重选择”字段是带有“ :tag_list”的字段。这是它的外观：

如果将“电话”字段与“标签列表”字段进行比较，则会看到“电话”字段具有Bootstrap样式，而“标签列表”字段则没有。 / p>

如何将Bootstrap样式添加到“多项选择”字段？

“多重选择”字段由“ chosen-rails”-gem给出。这是我的实现方式：

宝石文件：

gem 'chosen-rails'

application.js：

//= require chosen-jquery
//= require scaffold

application.scss：

@import "chosen";

scaffold.js.coffee：

$ ->
  # enable chosen js
  $('.chosen-select').chosen
    allow_single_deselect: true
    no_results_text: 'No results matched'
    width: '100%'

编辑：

感谢评论者，看来有可能覆盖多选择字段的类。以下代码使select字段看起来更像引导程序：

custom.scss：

.chosen-choices {
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.25rem !important;
  border: 1px solid #ced4da !important;
}

Answer 1

多亏了马克·戴维斯（Mark Davies），我找到了某种解决方案。

所选库使用“选择的选择”和“搜索的选择”类。可以使用属性“！important”覆盖这些类。

这不是最佳选择，但是现在，该字段看起来更像是引导程序。

这是我的代码：

custom.scss：

.chosen-choices {
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.25rem !important;
  border: 1px solid #ced4da !important;
}