Bootstrap 3 导航栏链接在应该水平时显示为垂直 [英] Bootstrap 3 navbar links display vertical when should be horizontal
问题描述
遵循 Michael Hartl 的 ruby on rails 教程，在将引导程序导入 custom.css.scss 文件后，链接显示为块(垂直)，而它们实际上应该是水平的，从而导致导航栏非常粗，如下所示.所以问题是我做错了什么，如何使用 boostrap 使导航水平?
这是我的 application.html.erb 布局
<头><title><%= full_title(yield(:title)) %></title><%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" =>真%><%= javascript_include_tag "application", "data-turbolinks-track" =>真%><%= csrf_meta_tags %><!--[如果是 IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><身体><header class="navbar navbar-fixed-top navbar-inverse"><div class="navbar-inner"><div class="容器"><%= link_to "Dog Park", root_path, id: "logo" %><导航><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></nav></标题><div class="容器"><%=产率%>
</html>
这是我的 Gemfile
source 'https://rubygems.org'红宝石'2.0.0'#ruby-gemset=railstutorial_rails_4_0宝石导轨"，4.0.2"组:开发，:测试做宝石'sqlite3'，'1.3.8'宝石rspec-rails"，2.13.1"gem 'guard-rspec', '2.5.0'gem 'spork-rails', '4.0.0'gem 'guard-spork', '1.5.0'宝石子进程"结尾组:测试做宝石硒网络驱动程序"，2.35.1"宝石水豚"，2.1.0"宝石咆哮"，1.0.3"结尾gem 'sass-rails', '4.0.1'gem 'uglifier', '2.1.1'宝石咖啡轨"，4.0.1"宝石'jquery-rails'，'3.0.4'gem 'turbolinks', '1.1.1'宝石'jbuilder'，'1.0.2'gem "bootstrap-sass", "~> 3.0.3.0"组 :doc 做gem 'sdoc', '0.3.20', 要求:false结尾组:生产做宝石pg"，0.15.1"宝石rails_12factor"，0.0.2"结尾(我没有足够的代表来评论 Mlennie 的回答，所以这需要单独回答)
正如 Mlennie 所说，添加导航栏导航类终于奏效了."
这意味着改变:
致:
Following Michael Hartl's ruby on rails tutorial and after importing bootstrap into a custom.css.scss file the links display as a block (vertical) when they should really be horizontal causing the navbar to be really thick as shown below. So the question is what did I do wrong and how can I make the navigation horizontal using boostrap?
Here's my application.html.erb layout
<!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>
here's my 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
(I don't have enough rep to comment on Mlennie's answer, so this needs to be a separate answer)
As Mlennie says, "adding a navbar-nav class finally worked."
What this means is to change:
<ul class="nav pull-right">
To:
<ul class="nav pull-right navbar-nav">
这篇关于Bootstrap 3 导航栏链接在应该水平时显示为垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
