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

【问题标题】：Rails, Chosen, Bootstrap: How to apply Bootstrap Styling to a Multiple Select fieldRails，Chosen，Bootstrap：如何将 Bootstrap 样式应用于多选字段
【发布时间】：2018-09-25 21:26:53
【问题描述】：

导轨：5.2.1

红宝石：2.5.1p57

引导程序：4.1.3

我正在尝试将引导样式添加到多选字段。

这是我的表格：

<%= 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”的字段。这是它的外观：

如果您将“电话”字段与“标签列表”字段进行比较，您会发现“电话”字段具有引导样式，而“标签列表”字段没有。

如何将引导样式添加到多选字段？

多选字段由“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%'

编辑：

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

custom.scss：

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

【问题讨论】：

我认为 bootstrap 没有标签，但确实有相似但不相同的徽章。如果您希望它看起来像引导程序，那么您必须创建自己的 CSS 来设置它的样式。如果您搜索“引导标签”，则有许多网站提供有关样式标签的信息。
@MarkDavies 我更新了我的问题。如果您发布答案，我会接受。
无需发布答案，因为您已经回答了自己的问题。只接受你自己的答案。我的评论只是一个帮助。

标签： ruby-on-rails twitter-bootstrap jquery-chosen

【解决方案1】：

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

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

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

这是我的代码：

custom.scss：

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

【讨论】：