Bootstrap 3导航栏链接在应该水平时显示垂直答案

【问题标题】：Bootstrap 3 navbar links display vertical when should be horizontalBootstrap 3导航栏链接在应该水平时显示垂直
【发布时间】：2014-01-06 23:19:07
【问题描述】：

按照 Michael Hartl 的 ruby on rails 教程并在将引导程序导入 custom.css.scss 文件后，链接显示为块（垂直），当它们确实应该是水平的时，导致导航栏非常厚，如下所示。所以问题是我做错了什么，如何使用 boostrap 使导航水平？

这是我的 application.html.erb 布局

<!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 "Dog Park", root_path, id: "logo" %>
                    <nav>
                        <ul class="nav pull-right">
                            <li><%= link_to "Home", root_path %></li>
                            <li><%= link_to "About", about_path %></li>
                            <li><%= link_to "Help", help_path %></li>
                            <li><%= link_to "Play Time", '#' %></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div class="container">
            <%= yield %>
        </div>
    </body>
</html>

这是我的 Gemfile

source 'https://rubygems.org'
ruby '2.0.0'
#ruby-gemset=railstutorial_rails_4_0

gem 'rails', '4.0.2'

group :development, :test do
  gem 'sqlite3', '1.3.8'
  gem 'rspec-rails', '2.13.1'
  gem 'guard-rspec', '2.5.0'
  gem 'spork-rails', '4.0.0'
  gem 'guard-spork', '1.5.0'
  gem 'childprocess'
end

group :test do
  gem 'selenium-webdriver', '2.35.1'
  gem 'capybara', '2.1.0'
  gem 'growl', '1.0.3'
end

gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'
gem "bootstrap-sass", "~> 3.0.3.0"

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

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

【问题讨论】：

您或其他人可能会覆盖 css 方法。如果是这样，您可以自己覆盖这些方法，您可以查看它们是否在您的浏览器调试器中被覆盖。只是快速浏览一下引导程序，或许可以尝试将navbar-right 作为一个类添加到ul。放手告诉我。
发生这种情况是因为您使用的是 bootstrap-sass-3，tutorial Gemfile 强制使用 bootstrap-sass-2 和 gem 'bootstrap-sass', '2.3.2.0'

标签： ruby-on-rails twitter-bootstrap railstutorial.org

【解决方案1】：

（我没有足够的代表来评论 Mlennie 的回答，所以这需要单独回答）

正如 Mlennie 所说，“添加 navbar-nav 类终于奏效了。”

这意味着改变：

<ul class="nav pull-right">

收件人：

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

【讨论】：

【解决方案2】：

添加 navbar-nav 类终于奏效了。

【讨论】：