栅格实例:移动设备和桌面屏幕

W3CSchool > bootstrap3中文手册 > Bootstrap 响应式布局 > 栅格实例:移动设备和桌面屏幕

实例:移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-*.col-md-*。请看下面的实例,研究一下这些是如何工作的。

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
  1. <!-- Stack the columns on mobile by making one full-width and the other half-width --> 
  2. <div class="row"> 
  3.   <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 
  4.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
  5. </div> 
  6.  
  7. <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> 
  8. <div class="row"> 
  9.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
  10.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
  11.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
  12. </div> 
  13.  
  14. <!-- Columns are always 50% wide, on mobile and desktop --> 
  15. <div class="row"> 
  16.   <div class="col-xs-6">.col-xs-6</div> 
  17.   <div class="col-xs-6">.col-xs-6</div> 
  18. </div>

没有找到答案?搜索一下吧!

学习导航


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