2017-05-21 5 views
2

ブートストラップグリッドを学習しようとしていますが、私はグリッドを正しく使用したと思いますが、私のコードではCodepenでは正しいとは思えますが、私が期待したものブートストラップの列が並んでいません

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
     <title>Testando Grids</title> 

     <!-- Bootstrap --> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> 

     <!-- CSS --> 
     <style type="text/css"> 
      .red { 
       background-color: red; 
      } 
      .blue { 
       background-color: blue; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="red col-md-8">8</div> 
       <div class="blue col-md-4">4</div> 
      </div> 
     </div> 

     <script src="js/jquery-3.2.1.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </body> 
</html> 

(と私はCodepenに入る):私のコード私が持っているもの

Expected result using Bootstrap GridResult using Bootstrap Grid

答えて

2

あなたのコードは結構ですが、あなたは与えています間違ったbootstrap.min.cssパスは、あなたのコンソールをチェックし、ここに更新されたコードで、全ページ

.red { 
 
       background-color: red; 
 
      } 
 
      .blue { 
 
       background-color: blue; 
 
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
     
 
    
 
     <div class="container"> 
 
      <!-- Stack the columns on mobile by making one full-width and the other half-width --> 
 
      <div class="row"> 
 
       <div class="red col-md-8">8</div> 
 
       <div class="blue col-md-4">4</div> 
 
      </div> 
 
     </div>
をで表示3210

+0

私は動作しませんでした。私はその問題がコードペンで働いたらグリッドの構造にないと思う。たぶんそれは私がまたは何かに追加する必要があります。しかし、答えに感謝します。 – user3785008

+0

あなたのコンソールを最初に確認してください –

+0

これがそれです。ありがとうございます!今は動作しますが、ダウンロードされたバージョンのブートストラップでは十分ではありません。あなたはそれを説明できますか? – user3785008

関連する問題