栅格 Responsive column resets

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

  1. <div class="row"> 
  2.   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
  3.   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
  4.  
  5.   <!– Add the extra clearfix for only the required viewport –> 
  6.   <div class="clearfix visible-xs-block"></div> 
  7.  
  8.   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
  9.   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
  10. </div> 

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

  1. <div class="row"> 
  2.   <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> 
  3.   <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> 
  4. </div> 
  5.  
  6. <div class="row"> 
  7.   <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> 
  8.   <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> 
  9. </div>
本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 栅格 Responsive column resets

分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址