ブートストラップはどのようにプル＆プッシュするのですか

Question

私はイラストのようにブートストラップされていないページを修正しようとしています。しかし、私のcol-2、col-3、col-4は、列1と2に揃っていません。プルとプッシュの仕組みを理解できません。私は自分のモバイルレイアウトに取り組んできましたが、それはうまく見えますが、デスクトップに行くとレイアウトが乱れることがあります。

レイアウトをデスクトップにすると、このレイアウトになります。ミスアライメントされた見出しとその下の列。

Answer 1

。

.left-box { 
 
    height: 290px; 
 
    width: 100%; 
 
    background: #e66; 
 
    margin: 3px; 
 
} 
 

 
.right-box { 
 
    height: 70px; 
 
    background: #ee6; 
 
    margin: 3px; 
 
} 
 

 
@media screen and (min-width: 992px) { 
 
    .left-box, .right-box { 
 
     height: 200px; 
 
    }  
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-2 col-xs-5"> 
 
      <div class="left-box"></div> 
 
     </div> 
 
     <div class="col-md-10 col-xs-7"> 
 
      <div class="row"> 
 
      <div class="col-md-3"><div class="right-box"></div></div> 
 
      <div class="col-md-3"><div class="right-box"></div></div> 
 
      <div class="col-md-3"><div class="right-box"></div></div> 
 
      <div class="col-md-3"><div class="right-box"></div></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

注：ブートストラップ・ルールに従って、声明class="col-md-2 col-sm-5"はclass="col-lg-2 col-md-2 col-sm-5 col-xs-12"同じです。

Answer 2

実際にはプッシュプルクラスは必要ありません。あなたは、このようなマークアップを使用することができます。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="left-box"></div> 
     </div> 
     <div class="col-md-6"> 
      <div class="right-box"></div> 
      <div class="right-box"></div> 
      <div class="right-box">etc...</div> 
     </div> 
    </div> 
</div> 

ペン：あなたはので、彼らが次の行の上にジャンプしませんrowに黄色のdiv-Sを含める必要がhttp://codepen.io/anon/pen/yVKgwG