Bootstrap Responsive Utility Class

Question

我有4列用於在中型屏幕上轉至2行2列的大屏幕。但隨後柱子被推到中間的屏幕上並向下移動。

我知道一個響應式實用程序類應該修復它，只是不知道如何。

這裏是我的代碼

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

      <div class="col-lg-3 col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. 
      </div> 
      <div class="col-lg-3 col-md-6">Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </div> 
      <div class="col-lg-3 col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. 
      </div> 
      <div class="col-lg-3 col-md-6">Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </div> 

     </div> 
    </div> 

Answer 1

你一起申請clearfix有utility class。由於您只是在col-md-6上摺疊所有內容，請在第二列之後應用clearfix（因爲您需要兩個@中等）。

查看工作示例代碼段。

/*FOR DEMO ONLY*/ 
 

 
body { 
 
    padding-top: 50px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-3 col-md-6"> 
 
     <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
    </div> 
 
    <div class="col-lg-3 col-md-6"> 
 
     <div class="well">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    </div> 
 
    <div class="clearfix visible-md-block"></div> 
 
    <div class="col-lg-3 col-md-6"> 
 
     <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
    </div> 
 
    <div class="col-lg-3 col-md-6"> 
 
     <div class="well">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    </div> 
 
    </div> 
 
</div>