Ruby on Rails-Bootstrap-列未水平堆疊

Question

我一直在嘗試使用引導程序為Rails創建列時遇到一些問題。 我使用“ 集成Rails和Bootstrap，第1部分-安裝 ” 安裝了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>

在代碼中，我試圖創建水平堆疊的兩列，以便可以將它們用作以下行的標題。 但是，當我運行代碼時，我得到：

我嘗試了“ bootstrap 3.0中的列僅垂直堆疊 ”，但仍然無法正常工作。

我在Bootstrap 3.3.7和Ruby 2.2.6中使用Rails 5.0.1。

編輯-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'”然后運行捆綁安裝，可以通過使用sass gem和應用程序導入引導程序.html.erb文件。 感謝您的所有幫助。

Answer 1

我不確定您是否可以在不遵循Asset Pipeline的情況下使用Ruby on Rails加載css文件，基本上您將在app / assets / stylesheets中擁有一個application.css文件，html文件的head標記中應包含此清單文件，以下語法<%= 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中，您可以將Bootstrap包含在gem中，它稱為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創建新文件custom.scss in app/assets/stylesheets並將內容從application.css移到custom.scss。 還要檢查您使用的CSS選擇器不要覆蓋任何樣式。

Ruby on Rails-Bootstrap-列未水平堆疊

問題描述

2 個解決方案

解決方案1
0 已采納 2017-02-16 18:45:27

解決方案2
0 2017-02-16 18:55:34

Ruby on Rails-Bootstrap-列未水平堆疊

問題描述

2 個解決方案

解決方案1 0 已采納 2017-02-16 18:45:27

解決方案2 0 2017-02-16 18:55:34

解決方案1
0 已采納 2017-02-16 18:45:27

解決方案2
0 2017-02-16 18:55:34