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>