2017-06-20 7 views
0

ブートストラップに問題があります。以下は、postgresqlとturbolinksを無効にした私のアプリケーションページです。私が間違っていることを教えてください、私はそれを理解することはできません。ブートストラップナビバーが表示されない

<!DOCTYPE html> 
<html> 
<head> 
<title>Website</title> 
<%= csrf_meta_tags %> 

<%= stylesheet_link_tag 'application', media: 'all' %> 
<%= javascript_include_tag 'application' %> 
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384- 
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous"> 
</head> 
<body> 


<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
<button class="navbar-toggler navbar-toggler-right" type="button" data- 
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria- 
expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span> 
</button> 
<a class="navbar-brand" href="#">Navbar</a> 
<div class="collapse navbar-collapse" id="navbarNav"> 
<ul class="navbar-nav"> 
    <li class="nav-item active"> 
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> 
</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Features</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Pricing</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link disabled" href="#">Disabled</a> 
    </li> 
    </ul> 
</div> 
</nav> 


<%= yield %> 
</body> 
</html> 

The page looks as follows Browser console as follows, Using Bootstrap Gem and jquery Gem, let me know why I am recieving errors

+0

ブートストラップ宝石を使用していない任意の理由を使うのか? – hashrocket

+0

出力をブラウザコンソールに追加できますか? –

+0

コンソールイメージを追加しました。イムが宝石を使用していない理由はありません。私はちょうどブートストラップを学び始めました。 – realtomfeng

答えて

0

あなただけのブートストラップのCSSを輸入しました。 JSも必要です。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

は、ブートストラップの宝石を使用することをお勧めし、私は頻繁にbootstrap-sass

+0

私はブートストラップのgemとjquery gemを使用しています。それは今働いている! – realtomfeng

関連する問題