Question

我正在尝试在我的Rails项目中使用bootstrap-switch-rails，但我无法使其工作。我一直在关注this tutorial 这是我到目前为止所尝试的。

在我的Gemfile

中添加了此内容

gem 'bootstrap-switch-rails', '~> 3.0.0'

在app/assets/stylesheets/custom.scss

的顶部添加了此内容

@import "bootstrap";
@import "bootstrap3-switch";
@import "bootstrap-sprockets";

/* Rest of the file omitted */

这是我的application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap-switch
//= require_tree .

我的application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 *= require bootstrap-switch3

最后，我要使用开关的表单：

<% content_for :head do %>
  <script type="text/javascript">
  $(function() {
    $("input:checkbox").bootstrapSwitch();
  });
  </script>
<% end %>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@consultant) do |f| %>
      <%= render 'consultants/consultant_error_messages' %>

      <%= f.label :identifier %>
      <%= f.text_field :identifier, class: 'form-control' %>

      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control' %>

      <%= f.label :first_name %>
      <%= f.text_field :first_name, class: 'form-control' %>

      <%= f.label :last_name %>
      <%= f.text_field :last_name, class: 'form-control' %>

      <%= f.label :disabled, "Habilitar/Deshabilitar" %>
      <%= f.check_box :disabled, :data => { 
        :size=>'small', 'on-color'=>'success', 'on-text'=>'Habilitar', 'off-text'=>'Deshabilitar' 
      } %>

      <%= f.submit "Guardar", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

复选框显示为常规复选框，而不是开关关于我应该遗漏什么的任何想法？提前谢谢。

Answer 1

尝试将require bootstrap-switch3替换为require bootstrap3-switch

中的application.css

同时尝试在控制台中执行$("input:checkbox").bootstrapSwitch();以查看输出。

另一位用户解决了编写HTML的问题，而不是使用Rails生成的问题：rails 4 : change state issue with Bootstrap Switch

Bootstrap-switch-rails gem无法正常工作

1 个答案: