Bootstrap 3 navbar鏈接顯示垂直時應該是水平的

以下邁克爾哈特爾的紅寶石在rails教程和導入引導到custom.css.scss文件後，鏈接顯示爲一個塊（垂直）時，他們應該真的是水平導致導航欄如下所示非常厚。所以問題是我做錯了什麼，如何使用boostrap使導航水平？Bootstrap 3 navbar鏈接顯示垂直時應該是水平的

enter image description here

這裏是我的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

來源

2014-01-06 monty_lennie

您或別的東西可能是壓倒一切的CSS方法。如果是這樣，你可以自己重寫這些方法，你可以發現它們是否在你的瀏覽器調試器中被覆蓋。只要快速瀏覽bootstrap，可能嘗試將'navbar-right'作爲類添加到'ul'。放棄它並告訴我。 – Dol

發生這種情況是因爲您正在使用bootstrap-sass-3，[tutorial Gemfile]（http://www.railstutorial.org/book/_single-page#code-bcrypt_ruby）強制使用bootstrap-sass-2與' gem'bootstrap-sass'，'2.3.2.0'' – bain

添加一個導航欄，導航類的最後工作。

來源

2014-01-07 20:04:01

（我沒有足夠的代表對Mlennie的回答發表評論，所以這需要一個單獨的答案）

由於Mlennie說，「加入了導航欄，導航類終於奏效。」

這意味着改變：

<ul class="nav pull-right">

要：

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

來源

2014-01-30 15:47:07 Bernardo

很高興幫助！好的，我需要15個字符來寫評論... –

Bootstrap 3 navbar鏈接顯示垂直時應該是水平的

回答

相關問題