javascript - 将 Bootstrap-sass gem 包含到我的 Rails 应用程序中

Question

我尝试将 bootstrap-sass v.3.1.1.1 用于我的 Rails 4 应用程序，但它无法正常工作，我找不到解决方案!也许你可以帮助我。

我的文件看起来像这样:

/assets/stylesheets/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 vendor/assets/stylesheets of plugins, if any, 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require bootstrap
 *= require_tree .
 */

/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .

在对两个文件进行这些更改后，我发现我的 View 发生了变化(例如字体)，并且我可以使用 Bootstrap 按钮。

但是当我尝试使用网格结构或 javascripts 时，什么也没有发生!对于网格，我在我的一个 View 中使用了这段代码:

<div class="row">
  <div class="col-lg-10">
    <table>
        <tr><td><%= f.input :pre, as: :text, label:'Pre-Description' %></td></tr>
        <tr><td><%= f.input :post, as: :text, label:'Post-Description' %></td></tr>
        <tr><td><%= f.input :comment, as: :text %></td></tr>
    </table>
  </div>

  <div class="col-lg-2">
    <table>
        <tr><td><%= f.input :save_h, as: :float, label:'h/AC' %></td></tr>
        <tr><td><%= f.input :save_c, as: :float, label:'concessions/AC' %></td></tr>
        <tr><td><%= f.input :save_other, label:'others' %></td></tr>
        <tr><td><%= f.input :affect_design, label:'Design' %></td></tr>
        <tr><td><%= f.input :affect_stress, label:'Stress' %></td></tr>
        <tr><td><%= f.input :affect_me, label:'Manufacturing' %></td></tr>
        <tr><td><%= f.input :affect_other, label:'Others' %></td></tr>
        <tr><td><%= f.input :affect_dno, label:'Drawing number/ HTZ' %></td></tr>
        <tr><td><%= f.input :affect_mid, label:'Material ID' %></td></tr>
        <tr><td><%= f.input :affect_otherdoc, label:'Others' %></td></tr>
        <tr><td><%= f.input :owner, label:'Idea owner' %></td></tr>
        <tr><td><%= f.input :pps, label:'PPS available' %></td></tr>
        <tr><td><%= f.input :reference, label:'Reference (VV/ ZTV)' %></td></tr>
    </table>
  </div>
</div>

即使表单字段的位置发生了变化，但它并没有真正使用正确的网格。

有什么想法吗？

最好的问候!

编辑:我的 View 的html代码

单页机

  <link data-turbolinks-track="true" href="/assets/theming.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/mepagers.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/pimps.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/mepagers.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/pimps.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="e+3Scs+/HbQtb6q7pHrJ0Ewxheqctfeou35iJT/6lqw=" name="csrf-token" />
</head>

好的，如您所见， View 加载了所有这些 javascript，但没有加载样式表。这是正常的还是缺少什​​么？如果能提供任何帮助，我将不胜感激!

Answer 1

我现在明白了这个问题。您在 CSS 文件的顶部需要 Bootstrap require bootstrap 以及您的主题样式表 @import "bootstrap";。

删除主题样式表中的引用。