2017-09-25 28 views
-1

http://getbootstrap.com/ ver 4.0から手動でブートストラップをダウンロードしましたが、私のナビゲーション、XS、パネルクラスが動作しない理由を知りません。私はboostrap.min.cssでxsを検索しましたが、見つからなかったのです。何が悪いのですか?sm、md、lgクラスはすべて正常に動作しています。なぜいくつかのクラスが動作している理由がわかりません&なぜいくつかのクラスが動作しない理由は、私が公式にダウンロードした&スタイルシートのパスも完璧です。それはすべての解決策です。私のブートストラップナビゲーションが動作しないのはなぜですか?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-compatible" Content="IE-edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 

</head> 
<body> 


<div class="navbar navbar-default" role="navigation"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="fa fa-align-justify"></span> 
      </button> 
      <span class="navbar-brand">Diffie</span> 
     </div> 

     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
       <li><a href="#">Link4</a></li> 
       <li><a href="#">Link5</a></li> 
      </ul> 
     </div> 

    </div> 
<div class="container"> 



    <div class="row"> 
     <div class="col-sm-6"> 
      <p class="hidden-xs"><b>AAA Ipsum is simply dummy text of the printing</b> and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </div> 

     <div class="col-sm-6"> 
      <p>AAA Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </div>  
    </div> 

    <div class="row"> 
     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 


    </div> 
</div> 

</body> 
</html> 
+3

これはPHPとは何の関係もありません。 Btwあなたはブートストラップグリッドシステムのためにgoogleする必要があります。あなたのグリッドはまったく正しくありません。私が覚えている限り、グリッドシステムは12ポイントのグリッドシステムに基づいています。あなたは実際に1列に8行のcol-6を持っています。どのようにブートストラップがこれをハンドリングしているかわからないが、正しく表示されるかもしれないが、私はその良い習慣を考えていない。 – Twinfriends

答えて

0

ブートストラップ4.0バージョンは、もはや-xsを使用しています: はここに私のコードです。ちょうどcol-2を使うか、同じ結果を与えるべきものは何でも。

ブートストラップのサイトから:

...私たちは、最も低い(エクストラ小)ブレークポイントから-xs中置を落としました。 xsは、sm、md、lg、xlのような応答可能なブレークポイントではありません。なぜなら、最小幅以上でスタイルを適用し始めるわけではないからです。バウンディング@mediaクエリがないので、すべてに適用されます。

0

私はあなたにも、ヘッダにいくつかの書店を忘れてしまったと思う:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

関連する問題