モバイルでのブートストラップnavbarが動作しない

私は学校（ブラジル）で私のクラブのサイトを作っています。私はモバイルで自分のサイトで問題を解決する方法を知っています。押されたときの携帯電話の3行は何もしません。モバイルでのブートストラップnavbarが動作しない

<html> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 

<title>ClubeDiversidade</title> 
</head> 
<style> 
body { 
background-color: orange; 
} 

</style> 
<body> 
<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#">Clube da diversidade</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
    <ul class="navbar-nav"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Pagina inicial <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Inscrição</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="sobrenatural.html">Sobrenatural</a> 
     </li> 
<li class="nav-item"> 
     <a class="nav-link" href="#">Tecnologia</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Outras atividades</a> 
     </li> 
    </ul> 
    </div> 
</nav> 
<div class="container-fluid"> 
    <center>Bem-vindo!!</center> 
</div> 
</body> 
</html>

出典

2017-10-01 kopimopi

「機能していません」は専門用語ではありません。何が効いていないのですか？どの4行？ – Rob

私はそれを押すと、オプションが表示されません。 – kopimopi

どの4行ですか？それは何ですか"？ – Rob

あなたが作業トグルを取得するには、本体を閉じる前jqueryのとブートストラップJSを追加する必要があります。

ノート：ここでの順序は重要です。jquery jsリンクを最初に配置し、次にjsをブートストラップします。

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
    <title>ClubeDiversidade</title> 
 
</head> 
 
<style> 
 
    body { 
 
    background-color: orange; 
 
    } 
 
</style> 
 

 
<body> 
 
    <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
 
    <a class="navbar-brand" href="#">Clube da diversidade</a> 
 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
 
     <ul class="navbar-nav"> 
 
     <li class="nav-item active"> 
 
      <a class="nav-link" href="#">Pagina inicial <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Inscrição</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="sobrenatural.html">Sobrenatural</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Tecnologia</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Outras atividades</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
    <div class="container-fluid"> 
 
    <center>Bem-vindo!!</center> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
</body> 
 

 
</html>

出典

2017-10-01 18:25:02 bhansa

最初にjqueryを入れてからブートストラップjsを入れてください。 – bhansa

こんにちはBootstrap Documentationを指します。

多くの当社のコンポーネントは、JavaScript機能を使用する必要があります。具体的には、jQuery、Popper.js、独自のJavaScriptプラグインが必要です。あなたのページの終わり近くに、末尾の</body >タグの直前に次のものを置き、それらを有効にします。 jQueryが最初に来てから、Popper.js、それからJavaScriptのプラグインが来なければなりません。

作業するには、これらの行をページに追加する必要があります。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

私はBootstrap 4 Editorを使用し、中にあなたのコードをコピーしてエディタが組み込まれているため、ブートストラップのJavaScriptそれは、完璧に動作します。

出典

2018-03-10 01:16:46

モバイルでのブートストラップnavbarが動作しない

答えて

関連する問題