Question

我在Rails Tutorial的第5部分，我遇到了Bootstrap CSS的问题。我只是包含它，导航栏没有按预期渲染。这就是发生的事情：

enter image description here

如您所见，导航栏项目不是水平的而是垂直的。这是HTML标记：

<!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">
      <%= yield %>
    </div>
  </body>
</html>

关于可能出现什么问题的任何想法？我还没有添加任何无关的CSS。

Answer 1

好吧，这似乎是我的Bootstrap版本和教程使用的版本的问题。为了解决这个问题，我刚刚更改了这一行：

<ul class="nav pull-right">

到此

<ul class="nav navbar-nav navbar-right">

得到了理想的结果：

enter image description here

Rails教程4.1 Bootstrap CSS无法正确呈现

1 个答案: