ブートストラップ4 - カラムグリッドが反応しない

Question

私はブートストラップ4カラムを達成しようとしています。しかし、これは反応するdivがお互いに重なっているようには機能しません。応答

これは私が試したものですが、それが応答

<div class="container"> 
<div class="row"> 
<div class="col-md-12"> 
<div class="col-md-3 height"></div> 
<div class="col-md-3 height"></div> 
<div class="col-md-3 height"></div> 
<div class="col-md-3 height"></div> 
</div> 
</div> 
</div> 

これは私のCSS

.height{ 

height:350px; 
} 

Answer 1

であるあなたは、すべての列を追加することができます動作していないこれを達成するための手順

divを "col-sm-6"と "col-xs-12"に変換します。

Answer 2

<div class="row"> 
<div class="container"> 

<div class="col-md-3 col-sm-3 col-xs-6"> 
<div class=" height"> 

</div> 
</div> 
<div class="col-md-3 col-sm-3 col-xs-6"> 
    <div class=" height"> 

    </div> 
    </div> 
    <div class="col-md-3 col-sm-3 col-xs-6"> 
    <div class=" height"> 

    </div> 
    </div> 
    <div class="col-md-3 col-sm-3 col-xs-6"> 
    <div class=" height"> 

    </div> 
    </div> 
    </div> 
    </div> 
    </div> 

col-mdこのコードを使用してみてくださいあなたは、あなたがcol-xsクラスを使用する必要があります未満768pxブラウザの幅のためにmin-width: 768pxcol-smクラスを使用する必要があります未満992px幅についてmin-width: 992pxためです。あなたがそれを反応的にしたいならば、これらのクラスを使うようにしてください。

そしてCSS：これは動作するはずです .height{width:100%;height:350px;background: #000;}

Answer 3

<div class="container"> 
<div class="row"> 
<div class="col-xs-12"> 
<div class="col-xs-3 height"></div> 
<div class="col-xs-3 height"></div> 
<div class="col-xs-3 height"></div> 
<div class="col-xs-3 height"></div> 
</div> 
</div> 
</div> 

。私はjs binで試しました