Question

我目前遇到了在我的Rails 4.0.5应用程序中加入Bootstrap 3的问题。它背后的服务器是Apache服务器。正在使用的Rails服务器是Webrick。我在twitter-bootstrap-rails，bootstrap-sass和Zurb Foundation的gem安装方面遇到了极大的困难，因此我将采用原生文件合并的方式。

我目前在app / assets / javascripts中有bootstrap.js，在app / assets / stylesheets中有bootstrap.css。据我所知，这两个是一般运行Bootstrap所需的唯一文件。该应用程序在index.html.erb中调用这两个脚本，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap 3.0 Grid System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="/assets/bootstrap.css" media="all" rel="stylesheet" />
    <script src="/assets/bootstrap.js"></script>
    <style>
    [class*="col-"] {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    background-color: rgba(86,61,124,.15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86,61,124,.2);
    }
    </style>
</head>
<body>
<div class="container">
<h3>Three equal columns</h3>
  <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>

</div>

</body>
</html>

当我启动Apache服务器并且rails服务器然后打开应用程序时，会出现这种情况：https://imgur.com/gT7X756

根据这个问题：Columns in bootstrap 3.0 only stacking vertically

我尝试将所有-md-更改为-xs-并且根本没有完成任何操作。

除此之外，尺寸完全不准确。任何大小的列只占用整个宽度减去填充。

我尝试使用CDN方法托管Bootstrap，这使得应用程序看起来正确但是由于安全/维护问题，我更愿意将文件保留在内部。

我现在想知道的是，如果我确实为Bootstrap正确地做了所有事情，但是路由导致索引中的代码被读作普通的HTML / CSS，而不是从实际导入Bootstrap文件资产目录。在日志中，我看到了

开始GET＆＃34; /assets/stylesheets/bootstrap.css" for（snip）ActionController :: RoutingError（没有路由匹配[GET]＆＃34; /assets/stylesheets/bootstrap.css"）

类似于bootstrap.js，application.css和application.js

我不确定在这种特殊情况下该怎么做。

另一种可能性是我得到了一个糟糕的Bootstrap版本（从Bootstrap下载得到它，其中有一个Dist文件夹）

我有一个熟人的建议，就是在Apache服务器上使用Alias指向这些文件的中心位置，但我不知道这是否适用于Rails。

有什么想法吗？如果需要，我很乐意提供更多代码段。

根据要求：app / views / layouts中的application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrapapp</title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

也许我需要更改stylesheet_link_tag和javascript_include_tag以指向Bootstrap文件并清除这些turbolinks的东西，因为我没有将gem包含在这个特定的项目中。

编辑：用

替换当前样式表和javascript标签

 <%= stylesheet_link_tag    "bootstrap"%>
 <%= javascript_include_tag "bootstrap"%>

即使重新启动服务器，

也根本没有改变屏幕。

的Gemfile

source 'https://rubygems.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.5'

# Use DB2 as the database for Active Record
gem 'ibm_db'

gem 'will_paginate', '~> 3.0'

# possible conflict with bootstrap
# gem 'haml'

我想我可能需要添加sprockets gem以及资产管道需要的任何其他东西来解决这个问题。

Answer 1

将布局文件更改为：

<!DOCTYPE html>
  <html>
    <head>
      <title>Bootstrapapp</title>
      <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
      <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
      <%= csrf_meta_tags %>
    </head>
    <body>
      <%= yield %>
    </body>
  </html>

#index.html.erb
<div class="container">
  <h3>Three equal columns</h3>
  <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>

</div>

确保您的bootstrap.css文件位于app / assets / javascript目录中的app / assets / stylesheets和bootstrap.js内。我们正在做的是我们从app / assets / stylesheets / application.css和app / assets / application.js文件加载你的css和js文件，如果你打开这些文件，让我们说你打开application.css，你会看到你有：

*= require_tree .

这一行基本上告诉rails加载app / assets / stylesheets目录下的所有文件，同样在application.js文件中。 详情请查看{{3} }。您还应该结帐Rails Asset Pipeline

Answer 2

找到解决方案！我不想成为那些将问题标记为已解决的人之一，但不要让任何人知道我究竟做了什么，所以这就是我所做的。我回去看了一下我的另一个项目，在那里我成功地将CSS文件与html分开以便于阅读，并在那里找到了我的答案。我要做的是从app / assets中拖动assets文件夹（stylesheet和javascript文件夹）的内容并将它们放入app / public文件夹。然后我更新了视图中的样式表和javascript包含标签，指向“bootstrap”，这样它就可以找到公共目录中的文件。这种方法允许我绕过对资源管道宝石的需求，这些宝石给我带来了很多麻烦，并且还消除了我在每次请求时在控制台日志中获得的所有路由匹配错误。

Bootstrap列没有并排出现，宽度相同

2 个答案: