2017-12-31 348 views
1

私はブートストラップに新しいですし、私は最近、自分のテンプレートのいずれかを使用し、すべてがうまく動作しますが、私のナビゲーションバーが正常にロードされていない、それは次のようになりますロードしませんChromeとFirefoxの両方で、この: What I getブートストラップのナビゲーションバーは適切に

と、これは私のhtmlです(のみNAV部)

<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Project name</a> 
 
      </div> 
 
      <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#about">About</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
      </div><!--/.nav-collapse --> 
 
     </div> 
 
     </nav>
助けてもらえますか?

答えて

0

CSSが正しく読み込まれていないようです。 http://getbootstrap.com/docs/3.3/getting-started/#downloadからあなたのページ<頭>にこれを追加してみてください:

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

それはブートストラップのちょうどコピーです。それがうまくいくなら、問題はあなたのローカルコピー(あなたがCDNを使用しているならば)であることを知っています。そうでなければ問題は他にあります。

編集:私はあなたが別のウェブサイトで提供したコードをテストしたと言って編集する必要があり、うまくいくようです。

+1

を私はブートストラップ-theme'が必要である 'インポートするとは思いません。また、トップにjQueryをインポートして、メニューボタンをモバイル画面で操作できるようにすることもできます。 –

+0

何かの理由で3.3と一緒に働いてくれてありがとう! –

0

はjsfiddleに罰金作品:

https://jsfiddle.net/ajrvrtz6/ 

私が使用: butstrap v3.3の

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/…; integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg‌​4Va+PmSTsz/K68vbdEjh‌​4u" crossorigin="anonymous"> 
<!-- Latest compiled and minified JavaScript --> 
<script src="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/…; integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mC‌​WNIpG9mGCD8wGNIcPD7T‌​xa" crossorigin="anonymous"></script> 
関連する問題