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

！[浏览器显示标题未格式化-red框，然后错误框未在蓝框中格式化] [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，bootstrap，示例应用程序，标头css无法正常工作/格式化

1 个答案: