邁克爾·哈特爾/紅寶石軌道上，引導，示例應用程序，標題CSS不工作/如預期的格式

我試圖按照邁克爾哈特爾的教程。但是，當我按照說明添加引導程序 - 某些部分工作 - 而其他部分則不行。塊被形成，黑色欄在那裏，但3個鏈接沒有格式化。它們以藍色顯示，一個在另一個下面。有人可以請幫忙。邁克爾·哈特爾/紅寶石軌道上，引導，示例應用程序，標題CSS不工作/如預期的格式

下面是創業板文件

source 'https://rubygems.org' 

    # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 
    gem 'rails', '4.0.8' 
    gem 'bootstrap-sass', '2.3.2.0' 
    gem 'sprockets', '2.11.0' 

    gem 'sqlite3', '1.3.8' 

    group :development, :test do 
     gem 'rspec-rails', '2.13.1' 
    end 
    group :test do 
     gem 'selenium-webdriver', '2.35.1' 
     gem 'capybara', '2.1.0' 
    end 

    gem 'sass-rails', '4.0.1' 

    group :assets do 
    gem 'compass' 
    gem 'autoprefixer-rails' 

    gem 'coffee-rails', '4.0.1' 
    gem 'uglifier', '2.1.1' 
    end 

    gem 'factory_girl_rails', '4.2.0' 
    gem 'bcrypt-ruby', '3.1.2' 
    gem 'jquery-rails', '3.0.4' 
    gem 'turbolinks', '1.1.1' 
    gem 'jbuilder', '1.0.2' 

    group :doc do 
     gem 'sdoc', '0.3.20', require: false 
    end 

    group :production do 
     gem 'rails_12factor', '0.0.2' 
    end

下面是在瀏覽器中application.html.rb

<!DOCTYPE html> 
<html> 
    <head> 
    <title><%= full_title(yield(:title)) %></title> 
    <%= stylesheet_link_tag "application", media: "all", 
            "data-turbolinks-track" => true %> 
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
    <%= csrf_meta_tags %> 
    <!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

    </head> 
    <body> 
    <header class="navbar navbar-fixed-top navbar-inverse"> 
     <div class="navbar-inner"> 
    <div class="container"> 
     <%= link_to "sample app", '#', id: "logo" %> 
     <nav> 
     <ul class="nav pull-right"> 
      <li><%= link_to "Home", '#' %></li> 
      <li><%= link_to "Help", '#' %></li> 
      <li><%= link_to "Sign in", '#' %></li> 
     </ul> 
     </nav> 
    </div> 
     </div> 
    </header> 
    <div class="container">

代碼

<html> 
     <head> 
     <title>RorTz Title</title> 
     <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" /> 
     <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/static_pages.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script> 
     <meta content="authenticity_token" name="csrf-param" /> 
<meta content="etipjBYXXoCYXiXE1u/yhLTW5PXa9Ni1Lu30inVP3UM=" name="csrf-token" /> 
     <!--[if lt IE 9]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

</head> 
<body> 
    <header class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a href="/" id="logo">sample app</a> 
     <div class="nav-collapse"> 
      <ul class="nav"> 
      <li><a href="/">Home</a></li> 
      <li><a href="/help">Help</a></li> 
      <li><a href="/signup">Sign in</a></li> 
     </ul> 
    </div> 
    </div> 
    </div> 
    </header> 

    <div class="container">

！[瀏覽器示出了報頭未格式化 - 紅色框，然後錯誤框不會在藍框格式化] [1]

來源

2014-08-28 Ady

我建議你檢查http://railscasts.com/episodes/328-twitter-bootstrap-basics。 – Bongs 2014-08-28 19:58:52

它與版本的一些瘋狂的事情。仍然無法使用rails和bootstrap-saas甚至twitter-bootstrap-rails在Windows上工作。 – Ady 2014-08-29 19:10:40

我不知道爲什麼內容在'head'標籤！它們應該放在'body'標籤中。 – Bongs 2014-08-29 19:57:54

貌似應用使用Bootstrap3和邁克爾哈特爾是版本2，使代碼沒有按預期工作！該問題出現在UL標籤中。它缺少navbar-nav類，這使得所有的差異。

<ul class="nav navbar-nav pull-right"> 
      <li><%= link_to "Home", root_path %></li> 
      <li><%= link_to "Help", help_path %></li> 
      <li><%= link_to "Sign in", signup_path %></li> 
     </ul>

另外這裏是創業板文件，工程

gem 'sass-rails', '~> 4.0.3' 
gem 'bootstrap-sass'

而application.js中

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap-sprockets 
//= require_tree .

最後framework_and_overrides.css.scss

// import the CSS framework 
@import "bootstrap-sprockets"; 
body { padding-top: 60px; } 
@import "bootstrap"; 

....

來源

2014-08-29 22:48:12 Ady

邁克爾·哈特爾/紅寶石軌道上，引導，示例應用程序，標題CSS不工作/如預期的格式

回答

相關問題