4列がブートストラップで反応する

Question

4列で行を作りたい。ユーザーがタブレットを使用すると、行には2列、残りの2行には行の下にジャンプします。

ユーザーがモバイルを使用すると、行は1列になり、他の列は互いに下にジャンプします。

これを手伝ってもらえますか？私はこれを試しました：

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

Answer 1

問題は、あなたがdivのために持っているかもしれない余白または境界線のようです。また、あなたは常に（「bootCols」と言う）それらのすべて単一のクラスを与える<div class="row">

でそれらをラップし、このCSSを追加する必要があります。

.bootCols{ 
    margin:0; 
    box-sizing:border-box; 
    padding:5px; 
    border:2px solid auto; 
} 

あなたはこのCSSで/編集パディングとボーダーを削除することができます

.bootCols{ 
 
    height:100px; 
 
    margin:0; 
 
    box-sizing:border-box; 
 
    padding:5px; 
 
    border:2px solid black; 
 
    background-color:red; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-3 col-sm-6 col-xs-12 bootCols"> 
 
     </div> 
 
     <div class="col-md-3 col-sm-6 col-xs-12 bootCols"> 
 
     </div> 
 
     <div class="col-md-3 col-sm-6 col-xs-12 bootCols"> 
 
     </div> 
 
     <div class="col-md-3 col-sm-6 col-xs-12 bootCols"> 
 
     </div> 
 
    </div> 
 
    </div>

：あなたは

を必要とするここでは実際の例です