自動レイアウトの列がブートストラップで機能しない

Question

次のコードを使用しようとしましたが、動作しません。しかし、クラス "col"を "col-xs-4"に変更すると、すべてのものが疑わしいものとしてレイアウトされます。

https://v4-alpha.getbootstrap.com/layout/grid/#grid-options

<div class="container"> 
     <div class="row"> 
     <div class="col"> 
      1 of 2 
     </div> 
     <div class="col"> 
      1 of 2 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col"> 
      1 of 3 
     </div> 
     <div class="col"> 
      1 of 3 
     </div> 
     <div class="col"> 
      1 of 3 
     </div> 
     </div> 
    </div> 

私は、最新のブートストラップCDNを使用しています。

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

Answer 1

ブートストラップv4グリッドレイアウトオプションにリンクしていますが、スタイルシートではブートストラップv3.3.7 cdnを使用しています。以下に、あなたの<link rel>を調整します。ここでは

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 

は、この作業とフィドルです（私たちは

https://fiddle.jshell.net/nLqwtw43/