1
我正在構建一個長頁面,並希望導航欄的標籤在頁面上滾動時變爲活動狀態。由於我使用Bootstrap 3,我認爲scrollspy會起作用。但是,我無法讓它工作。以下是我的代碼。我希望得到任何幫助:)爲導航欄Scrollspy無法正常工作(BS 3和Rails 4)
<header class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to image_tag("Logomark_Red.png", alt: "") + " Title", root_url, class: "navbar-brand" %>
</div>
<div id="active-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li><%= link_to "About", root_url(:anchor => "about") %></li>
<li><%= link_to "Projects", root_url(:anchor => "past-projects") %></li>
<li><%= link_to "Team", root_url(:anchor => "team") %></li>
<li><%= link_to "Contact", root_url(:anchor => "contact") %></li>
</ul>
</div><!--/.nav-collapse -->
</div>
片斷application.html.erb文件
<!DOCTYPE html>
<html lang="en">
<head>
...head stuff....
</head>
<%= render 'layouts/nav' %>
<body data-target="#active-nav" data-spy="scroll" data-offset="0">
CSS身體
代碼
body{
position: relative;
margin-top: 50px;
}
申請ation.js文件
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require colorbox-rails
//= require_tree .
HTML (片段只是爲了顯示部分有ID和資產淨值鏈接,這些鏈接)
<section id="about" class="row">
<div class="container">
<div class="row">
<h1>title</h1>
<div class="col-md-6">
<p>content.</p>
</div>
<div class="col-md-6">
<%= image_tag("lego.jpg", width: "100%", alt: "") %>
</div>
<%= link_to "About Magnum Group", about_url, class: "btn btn-primary" %>
</div>
</div>
</section>
設置是正確的,除非你不會把.row放在Section #about(或任何其他)上。另外,您沒有將bootstrap.min.js作爲其中一個腳本文件。把它放在jQuery之後。 – Christina 2014-10-26 21:30:24
感謝您的回覆!我把這一行創建一個完整的行並在背景上添加一個圖像。我試圖刪除,看看它是否解決了問題,而沒有。另外,我正在使用[bootstrao-saas gem](https://github.com/twbs/bootstrap-sass)來添加bootstrap,並且它沒有提到application.js上的min文件的任何內容。我檢查了BS JS正在工作,看到下拉菜單在移動設備上工作(並且它工作),所以我假設BS JS是確定的。任何其他想法? – DJF 2014-10-26 21:39:11
沒錯,bootstrap-sprockets是.js文件。 .row不是必需的,它會在左側和右側添加負邊距,完全不使用任何寬度。你有可以鏈接到的HTML文件嗎? – Christina 2014-10-26 21:43:26