Javascript 引导列不会并排出现，并且宽度都相同_Javascript_Css_Ruby On Rails_Twitter Bootstrap 3

Javascript 引导列不会并排出现，并且宽度都相同

javascript css ruby-on-rails twitter-bootstrap-3

Javascript 引导列不会并排出现，并且宽度都相同,javascript,css,ruby-on-rails,twitter-bootstrap-3,Javascript,Css,Ruby On Rails,Twitter Bootstrap 3,我目前在Rails 4.0.5应用程序中加入Bootstrap3时遇到了一个问题。它后面的服务器是Apache服务器。正在使用的Rails服务器是Webrick。我在推特引导程序、Bootstrap SASS和ZURB基金会的GEM安装上遇到了极大的困难，因此我将走原生文件并入的路径。我目前在app/assets/javascripts中有bootstrap.js，在app/assets/stylesheets中有bootstrap.css。据我所知，这两个文件通常是运行引导所需的唯一文件。应

我目前在Rails 4.0.5应用程序中加入Bootstrap3时遇到了一个问题。它后面的服务器是Apache服务器。正在使用的Rails服务器是Webrick。我在推特引导程序、Bootstrap SASS和ZURB基金会的GEM安装上遇到了极大的困难，因此我将走原生文件并入的路径。我目前在app/assets/javascripts中有bootstrap.js，在app/assets/stylesheets中有bootstrap.css。据我所知，这两个文件通常是运行引导所需的唯一文件。应用程序在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>

我在想，也许我需要添加链轮gem和资产管道所需的任何其他内容来修复此问题。

将布局文件更改为：

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

这一行基本上告诉rails加载app/assets/stylesheets目录中的所有文件，application.js文件中也是如此。查看详细信息。您还应该签出找到的解决方案！我不想成为那些将问题标记为已解决但不让任何人知道我到底做了什么的人之一，所以我就是这么做的。我回头看了我的另一个项目，为了可读性，我成功地将CSS文件从html中分离出来，并在那里找到了我的答案。我要做的是从app/assets中拖出assets文件夹（样式表和javascript文件夹）的内容，然后将它们放到app/public文件夹中。然后我更新了视图中的样式表和javascript include标记，使其指向“bootstrap”，以便它可以在公共目录中找到文件。这种方法使我绕过了对资产管道gem的需求，这些gem给我带来了很多麻烦，同时也消除了我在控制台日志中每次请求时都会遇到的所有路由匹配错误。

其他引导样式是否适用于您？你下载了正确版本的引导程序吗？在您的情况下，它应该是版本3，因为您正在使用col md-*是的，我已经从下载了Bootstrap v3.2。我从他们网站上的示例模板中快速创建了一个导航栏，但也没有正确显示。浏览器中的Inspect元素确实指示返回404作为css和js文件，所以我怀疑这是这里的主要问题？你能发布你的布局文件吗？文件在app/views/layouts中吗？我会马上用这个来编辑主帖子。是的，你正在使用这个文件作为布局，对吗？这样做只会导致CSS在两组堆叠的列之间显示两次，其中一个#index.html.erb是纯文本。这个答案是否取决于已经为资产管道安装了gems？我还没有这么做。@johnpurtle你不必安装任何gem。阅读我给你的链接

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

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'

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

*= require_tree .