个人中心
gpt4 book ai didi

javascript - Bootstrap 列没有并排出现并且宽度都相同

转载 作者：太空宇宙 更新时间：2023-11-03 17:58:23 25 4
gpt4 key购买 nike

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

我目前在 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，而不是实际从 Assets 目录导入 Bootstrap 文件.在日志中，我看到

开始 GET "/assets/stylesheets/bootstrap.css"for (snip) ActionController::RoutingError (No route matches [GET] "/assets/stylesheets/bootstrap.css")/p>

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

即使在服务器重新启动后也根本没有改变屏幕。

gem 文件

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 以及 Assets 管道所需的任何其他内容来解决此问题。

最佳答案

将布局文件更改为:

<!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/stylesheets 中，而 bootstrap.js 位于 app/assets/javascript 目录中。我们正在做的是从 app/assets/stylesheets/application.css 和 app/assets/application.js 文件加载你的 css 和 js 文件，如果你打开这些文件，假设你打开 application.css，你会看看你有:

*= require_tree .

这一行基本上告诉 rails 加载 app/assets/stylesheets 目录中的所有文件，同样进入 application.js 文件。有关详细信息，请查看 Rails Asset Pipeline .您还应该结帐 Rails Tutorial on how layout and template works

关于javascript - Bootstrap 列没有并排出现并且宽度都相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25874883/

25 4 0
文章推荐： html - CSS 文件未在 Safari 中加载
文章推荐： python - 如何从 Py_CompileString 打印出错误(包括语法)？
文章推荐： python - 如何在 Google App Engine(Python) 上使用 JWT 标记用户名？
文章推荐： html - 让我的下拉列表下降 "up"
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com