CSS 未应用于我的 Rails 应用程序的引导模式

Question

以下是我的 Bootstrap 设置:

Rails 版本:4.1.1

gem 文件:

  gem 'bootstrap-sass', '~> 3.2.0'
  gem 'bootstrap3-datetimepicker-rails', '~> 3.0.2'
  gem 'bootstrap-validator-rails'

Application.css.scss(前 3 个导入，没有 require 指令)

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

应用程序.js

//= require jquery
//= require jquery.flexslider
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require ./plugins/bootstrap-select.js
//= require ./plugins/jquery.form.js
//= require bootstrap-datetimepicker
//= require bootstrapValidator.min
//= require bootstrap-sprockets
//= require_tree .

模态 HTML:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span><span class="sr-only">Close</span></button>
      <h4 class="modal-title" id="myModalLabel"> Title </h4>
    </div>
    <div class="modal-body">
       <%= render partial: 'modal_body' %>
    </div>
    <div class="modal-footer">      
      <button type="button" class="btn btn-primary">Mark</button>
    </div>
  </div>
</div>
</div>

我能够渲染模态，但模态占据了整个窗口的宽度。

Answer 1

代替Application.css.scss，

将文件重命名为 Application.scss。

mv Application.css.scss Application.scss