Question

我想在我的rails应用程序中实现一个boostrap模式。按钮正在显示，但是当我点击它时，没有任何内容出现：

/ Trigger the modal with a button
%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button"} Open Modal
/ Modal
#myModal.modal.fade{:role => "dialog"}
  .modal-dialog
    / Modal content
    .modal-content
      .modal-header
        %button.close{"data-dismiss" => "modal", :type => "button"} ×
        %h4.modal-title Modal Header
      .modal-body
        %p Some text in the modal.
      .modal-footer
        %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close

我想我错过了什么。这些是我安装的宝石：

source 'https://rubygems.org'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
gem 'haml', '~> 4.0', '>= 4.0.7'
gem 'foundation'
gem 'rails', '4.2.6'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
...

我的应用程序布局：

!!!
%html
  %head
    %title HealthyBox
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags

application.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

Answer 1

请务必遵循以下步骤

将以下行添加到app/assets/stylesheets/application.scss

@import "bootstrap-sprockets"; 
@import "bootstrap";

注意：确保文件具有.scss扩展名（或.sass用于Sass语法）。如果您刚刚生成了新的Rails应用程序，则可能会附带.css文件

低于app/assets/javascripts/application.js

的行

//= require bootstrap-sprockets

它会正常工作。

如何使用rails的bootstrap模式？

1 个答案: