Question

我一直在尝试使用bootstrap为Rails创建列时遇到一些问题。我用“Integrating Rails and Bootstrap, Part 1 - the Installation”安装了bootstrap。这就是我到目前为止所做的：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.css" />
  </head>
 <body>
  <div id="main-container" class="container">
   <div class="row">
     <div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
      <p>Test</p>
     </div>
    <div id="A_Time_Spent" class="col-md-6" style="background-color: LightSteelBlue" >
     <p>Test2</p>
    </div>
   </div>
  </div>
 </body>
</html>

在代码中，我试图创建两个水平堆叠的列，以便我可以将它们用作以下行的标题。但是，当我运行代码时，我得到：

我试过“Columns in bootstrap 3.0 only stacking vertically”，但我仍然无法让它发挥作用。

我正在使用Rails 5.0.1和Bootstrap 3.3.7以及Ruby 2.2.6。

编辑 - 02-16-17 - 5:00 PM

将标题移动到正确的位置。尝试将“href =”bootstrap.css“更改为”href =“stylesheets / bootstrap.css”，但RubyMine抱怨这一点。无视投诉，结果仍然相同。遵循@Fabrizio链接到的教程，我仍然无法使其工作。使用@ Fabrizio的代码，用

替换我的链接代码

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

我确实得到了我想要的结果但是根据我的理解，如果该网站出现故障，我将无法访问bootstrap.css

这就是我的“application.css.sass”文件：

@import "bootstrap-sprockets"
@import "bootstrap"

编辑 - 02/18/17

原来我遇到了咖啡脚本的问题，并添加了“gem'coffee-script-source'，'1.8.0'”，然后运行bundle install，我能够通过使用sass gem导入bootstrap和application.html.erb文件。谢谢你的帮助。

Answer 1

我不确定你是否可以在不使用Asset Pipeline的情况下使用Ruby on Rails加载css文件，基本上你将在app / assets / stylesheets中有一个application.css文件，html文件应该在头部有这个清单文件使用以下语法标记 <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>代替 <link rel="stylesheet" type="text/css" href="path to your css file" /> 清单文件application.css将包含指向所有css文件的链接，其语法如下：

@import "bootstrap-sprockets";
@import "bootstrap";

此外，对于Rails，您可以包含带有gem的Bootstrap，它名为bootstrap-sass，您可以按照https://github.com/twbs/bootstrap-sass上的说明进行操作

只需按照Gemfile中的说明包含gem，运行bundle install然后将其包含在application.css中。

听听您可以阅读有关资产管道的信息。 http://guides.rubyonrails.org/asset_pipeline.html

我在你的文本编辑器中包含了你的css，这是我得到的结果，两个垂直列，对我来说是红色和蓝色列。我想这是你想用col-md-6达到的结果吗？

这是我使用的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="main.css" rel="stylesheet" />
  </head>
<body>
  <div id="main-container" class="container">
   <div class="row">
     <div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
      <p>Test</p>
     </div>
    <div id="A_Time_Spent" class="col-md-6" style="background-color: red" >
     <p>Test2</p>
    </div>
   </div>
  </div>
</body>
</html>

Answer 2

一切看起来都不错，如果没有问题，请尝试创建新文件 custom.scss in app/assets/stylesheets 并将内容从application.css移动到custom.scss。另请检查您使用的css选择器不要覆盖任何样式。

Ruby on Rails - Bootstrap - 不是水平堆叠的列

2 个答案: