Michael Hartl / Ruby on Rails，引導程序，示例應用程序，標頭CSS無法正常工作/未按預期格式化

Question

我正在嘗試遵循Michael Hartl的教程。 但是，當我按照說明添加引導程序時，某些部分可以工作，而另一些則不能。 塊已形成，黑色條在那里，但3個鏈接未格式化。 它們只是以藍色顯示，一個在另一個下面。 有人可以幫忙。

以下是GEM文件

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]

Answer 1

看起來該應用程序正在使用Bootstrap3，而Michael Hartl在版本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文件

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

....

Michael Hartl / Ruby on Rails，引導程序，示例應用程序，標頭CSS無法正常工作/未按預期格式化

問題描述

1 個解決方案

解決方案1
0 已采納 2014-08-29 22:48:12

Michael Hartl / Ruby on Rails，引導程序，示例應用程序，標頭CSS無法正常工作/未按預期格式化

問題描述

1 個解決方案

解決方案1 0 已采納 2014-08-29 22:48:12

解決方案1
0 已采納 2014-08-29 22:48:12