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 .

在两个文件中的这些更改后，我认识到我的视图中的更改（例如字体），我可以使用引导按钮。

但是当我尝试使用网格结构或javascripts时，没有任何事情发生！对于网格，我在我的一个视图中使用此代码：

<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>

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

有什么想法吗？

祝你好运！

编辑： 我的观点的HTML代码

One Pager

  <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>

好的，你可以看到视图加载了所有那些javascripts而不是样式表。这是正常的还是缺少的东西？我真的很感激这里的任何帮助！

Answer 1

我现在看到了这个问题。您需要在CSS文件require bootstrap的顶部以及主题样式表@import "bootstrap";中使用引导程序。

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

Answer 2

好吧，它适用于我的布局中的那些线：

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

从这个主题得到：IE8 issue with Twitter Bootstrap 3

问题显然是IE8：/

不知道为什么会这样做：D

在我的rails应用程序中包含Bootstrap-sass gem

2 个答案: