栅格 Responsive column resets key:offset - Bootstrap 响应式布局

栅格 Responsive column resets

W3CSchool > bootstrap3中文手册 > Bootstrap 响应式布局 > 栅格 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>

CTRL + D 收藏本页

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)