Ruby on Rails教程第五章-样式

Question

I'm running through Michael Hartl's tutorial, and having reached the styling and layout chapter, seem to have got something wrong. Whereas in the tutorial, the site links are right aligned on a single line (like this http://railstutorial.org/images/figures/site_with_footer_bootstrap_4_0-full.png ), I get them right aligned one beneath the other, and some (but not all) other styling elements missing.

I've tried updating gems.

Example code - _header.html.erb

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

I think this means that bootstrap is unhappy with something, but I can't tell what.

Thanks for reading this far :)

Answer 1

Assuming that's all of your HTML for the navbar, it doesn't look like the tags were closed properly. Try:

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

Answer 2

If you ever have questions regarding your code vs what it should be, try checking his repository first.

https://github.com/railstutorial/sample_app_rails_4

There he has a full working copy of the sample application.

Answer 3

Digging further into RADan's comment

Weirdly, gem list --local gives - bootstrap-sass (3.1.1.0, 2.3.2.0)

I found that I had the same problem. To solve this (it serves the newer version of bootstrap instead of the older version - which causes CSS class issues) I deleted the older version of bootstrap by entering the following into the terminal:

gem uninstall bootstrap-sass -v 3.1.1.0