Rails，已选择，Bootstrap：如何将 Bootstrap 样式应用于多个 Select 字段

Question

Rails: 5.2.1

Ruby: 2.5.1p57

Bootstrap: 4.1.3

我正在尝试将 Bootstrap 样式添加到多个 Select 字段。

这是我的表格：

<%= 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 %>

Multiple Select 字段是带有“:tag_list”的字段。外观如下：

如果将 "Phone" 字段与 "Tag-List" 字段进行比较，您会发现 "Phone" 字段具有 Bootstrap 样式，而 "Tag List"-字段没有。

如何将 Bootstrap 样式添加到多个 Select 字段？

Multiple Select 字段由“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 字段的类。以下代码使 select 字段看起来更像 bootstrap:

custom.scss:

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

Answer 1

感谢 Mark Davies，我找到了一些解决方案。

所选库使用类 "chosen-choices" 和 "search-choices"。可以用属性“!important”覆盖这些类。

它不是最优的，但现在，该字段看起来更像 bootstrap。

这是我的代码：

custom.scss:

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

Rails，已选择，Bootstrap：如何将 Bootstrap 样式应用于多个 Select 字段

Rails, Chosen, Bootstrap: How to apply Bootstrap Styling to a Multiple Select field

ruby-on-rails

twitter-bootstrap

jquery-chosen