2017-11-12 23 views
0

私はブートストラップを学んできました。私は手伝っている非常に基本的なページを持っています。私はドロップダウンで追加しようとしましたが、クリックするとドロップダウンしませんでした。私はフォーラムにチェックしましたが、主なものはブートストラップのjsリンクを持っていない人でした。だから私はそれを含めました。私はそれが働くためのすべての適切なリンクを持っています。助けてくれてありがとう(コードは、他のすべてに正常に動作しますが、スニペットに変なことされて)、私のコードは次のとおりです。頭の中で2つのブートストラップバージョン1を呼び出しブートストラップのドロップダウンでクリック時のドロップダウンが表示されない

.div1 { 
 
     background-color:#80bfff; 
 
    } 
 

 
    .div2 { 
 
     background-color:#ccffff; 
 
    } 
 

 
    .div3 { 
 
     background-color:#80bfff; 
 
    } 
 

 
    .row { 
 
     height: calc(100vh - 300px); 
 
    } 
 

 
    #main { 
 
     background-color: #3333ff; 
 
    } 
 

 
    #main_head { 
 
     height: 150px; 
 
     margin: 0; 
 
    } 
 

 
    #main_foot { 
 
     height: 150px; 
 
     background-color:#3333ff; 
 
     margin: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    
 
    } 
 
    
 
    h1 { 
 
    color: black; 
 
    }
<!DOCTYPE html> 
 
    <html> 
 
     <html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> 
 
    
 
    </head> 
 
    <body> 
 
     
 
    <link rel="stylesheet" href="test.css"> 
 
    <script src="test.js"></script> 
 
    <div class="container-fluid" id="main"> 
 
     <h1 id="main_head">This is a heading</h1> 
 
     
 
     <div class="row"> 
 
     
 
     <div class="col-sm-2 div1"> 
 
      <div class="btn-group-vertical"> 
 
      <h4>These buttons don't work yet because I haven't implemented anything yet</h4> 
 
      <button type="button" class="btn btn-warning">Button 1</button> 
 
      <button type="button" class="btn btn-info">Button 2</button> 
 
      <button type="button" class="btn btn-success">Button 3</button> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="col-sm-8 div2"> 
 
     </div> 
 
     
 
     <div class="col-sm-2 div3"> 
 
      <div class="container"> 
 
      <h4>This is a dropdown menu</h4> 
 
      <div class="dropdown"> 
 
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu 
 
      <span class="caret"></span></button> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Dropdown 1</a></li> 
 
       <li><a href="#">Dropdown 2</a></li> 
 
       <li><a href="#">Dropdown 3t</a></li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     </div> 
 
     
 
     <div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div> 
 
    </div> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    </body> 
 
    </html>

答えて

1

まずyou'rそして、フッターの一つは、第二あなたはbootstrap.js

はスニペット

を見る前 popper.jsを呼び出す必要があります0

.div1 { 
 
     background-color:#80bfff; 
 
    } 
 

 
    .div2 { 
 
     background-color:#ccffff; 
 
    } 
 

 
    .div3 { 
 
     background-color:#80bfff; 
 
    } 
 

 
    .row { 
 
     height: calc(100vh - 300px); 
 
    } 
 

 
    #main { 
 
     background-color: #3333ff; 
 
    } 
 

 
    #main_head { 
 
     height: 150px; 
 
     margin: 0; 
 
    } 
 

 
    #main_foot { 
 
     height: 150px; 
 
     background-color:#3333ff; 
 
     margin: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    
 
    } 
 
    
 
    h1 { 
 
    color: black; 
 
    }
<!DOCTYPE html> 
 
    <html> 
 
     <html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 

 
    
 
    </head> 
 
    <body> 
 
     
 
    <link rel="stylesheet" href="test.css"> 
 
    <script src="test.js"></script> 
 
    <div class="container-fluid" id="main"> 
 
     <h1 id="main_head">This is a heading</h1> 
 
     
 
     <div class="row"> 
 
     
 
     <div class="col-sm-2 div1"> 
 
      <div class="btn-group-vertical"> 
 
      <h4>These buttons don't work yet because I haven't implemented anything yet</h4> 
 
      <button type="button" class="btn btn-warning">Button 1</button> 
 
      <button type="button" class="btn btn-info">Button 2</button> 
 
      <button type="button" class="btn btn-success">Button 3</button> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="col-sm-8 div2"> 
 
     </div> 
 
     
 
     <div class="col-sm-2 div3"> 
 
      <div class="container"> 
 
      <h4>This is a dropdown menu</h4> 
 
      <div class="dropdown"> 
 
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu 
 
      <span class="caret"></span></button> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Dropdown 1</a></li> 
 
       <li><a href="#">Dropdown 2</a></li> 
 
       <li><a href="#">Dropdown 3t</a></li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     </div> 
 
     
 
     <div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div> 
 
    </div> 
 
    </body> 
 
    </html>

+0

を働いていたこれは、完全に感謝を働きました。あなたはそれがその順序でなければならない理由を知っていますか?両方の方法でうまくいくように思えますが、もう一度 –

+0

としてください。bootstrap4.jsにはPopper.jsが必要です[これを参照](https://github.com/twbs/bootstrap/issues/22783)githubで尋ねられた最も問題の1つ – M0ns1f

+0

面白い、ありがとう –

0

私はあなたが別のCDNファイルを使用してみてくださいsouldだと思う、これは私のため

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>