bootstrap Navbarがブートストラップ4.0.0-alpha.2で動作しない

-2

bootstrap Navbarがブートストラップ4.0.0-alpha.2で動作しません。また、spyをスクロールします。スクリプトとCSSファイルの両方をブートストラップ3.3.7に置き換えようとしました...罰金しかし、このバージョンもナビゲーションバーのスタイルと両方でbootstrap Navbarがブートストラップ4.0.0-alpha.2で動作しない

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 

 
    <meta charset="utf-8"> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 

 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
 

 
    <style type="text/css"> 
 

 
     body{ 
 

 
     position:relative; 
 

 
     } 
 

 
     #home{ 
 

 
     margin-top:50px; 
 

 
     } 
 

 
     #home {padding-top:50px;height:500px;color: #fff; background-color: green;} 
 
     #one {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;} 
 
     #two {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} 
 
     #three {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} 
 
     #two1 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} 
 
     #two2 {padding-top:50px;height:500px;color: #fff; background-color: #009688;} 
 

 
    </style> 
 

 

 

 
    </head> 
 
    <body data-scroll="spy" data-target="#myNavbar" data-offset="10"> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top" id="myNavbar"> 
 

 
     <div class="container-fluid"> 
 

 
     <div class="navbar-header"> 
 

 
      <button type="button" class="navbar-toggle" \t data-toggle="collapse" data-target="#myNavbar"> 
 

 
      <span class="icon-bar"></span> 
 

 
      <span class="icon-bar"></span> 
 

 
      <span class="icon-bar"></span> 
 

 
      </button> 
 

 

 
      <a href="#" class="navbar-brand">WebSiteName</a> 
 

 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="myNavbar"> \t 
 

 
      <ul class=" nav navbar-nav" > 
 

 
      <li class="active"><a href="#home">Home</a></li> 
 

 
      <li><a href="#one">Section 1</a></li> 
 

 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2<span class="caret"></span></a> 
 

 
       <ul class="dropdown-menu" > 
 

 
       <li><a href="two1">Section 2-1</a></li> 
 

 
       <li><a href="two2">Section 2-2</a></li> 
 

 
       <li><a href="two3">Section 2-3</a></li> 
 

 
       </ul> 
 

 
      </li> 
 

 
      <li><a href="#three">Section 3</a></li> 
 

 
      </ul> 
 
     </div> 
 
     </div> 
 

 
    </nav> 
 

 

 

 

 
    <div id="home" class="container-fluid"> 
 

 
     <h1>Home</h1> 
 

 
     <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
     <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 

 
    </div> 
 

 

 
    <div id="one" class="container-fluid"> 
 

 
     <h1>One</h1> 
 

 
     <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
     <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 

 
    </div>                
 

 

 

 
    <div id="two" class="container-fluid"> 
 

 
     <h1>two</h1> 
 

 
     <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
     <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 

 

 
    </div> 
 

 

 

 
    <div id="three" class="container-fluid"> 
 

 
     <h1>Three</h1> 
 

 
     <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
     <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 

 

 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js" ></script> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script> \t 
 

 
    <script type="text/javascript"> 
 

 
     $("body").scrollspy({target:"#myNavbar"}); 
 

 
    </script> 
 

 
    </body> 
 
</html>

出典

2016-08-19 Saim Sajid

ブートストラップ4は非常に異なります。あなたは新しいnavbarのドキュメントを読んだことがありますか？ http://v4-alpha.getbootstrap.com/ – ZimSystem

ああ、実際には私はブートストラップを学んでいて、新しいブートストラップについての例とデータを持っている公式サイトとは異なるサイトからブートストラップを学びました。 –

アップデートHTML accordingly for the new Bootstrap 4 navbarに動作していないスクロールスパイ

http://codeply.com/go/yPEQsECngS

このBootstrap 4 upgrade toolで3.xコードを実行したところ、scrollspyは期待どおりに動作します。また、ブートストラップ4は現在ALPHAにあるので、変更されることに注意してください。

出典

2016-08-19 14:49:53 ZimSystem

一般的なアルファ免責条項に加えて、V4 Alpha 3の '.navbar'コンポーネントには、表示上の問題やバグがたくさんあります。 V4形式に移行することもできます。それは本当に機能的ではありません（V3コンポーネントと比較して） –

新しいブートストラップに従ってアップデートした後、うまくいきました4 –

bootstrap Navbarがブートストラップ4.0.0-alpha.2で動作しない

答えて

関連する問題