栅格实例:手机、平板、桌面 key:col-sm-*,平板设备 - Bootstrap 响应式布局

栅格实例:手机、平板、桌面

W3CSchool > bootstrap3中文手册 > Bootstrap 响应式布局 > 栅格实例:手机、平板、桌面

实例:手机、平板、桌面

在上面案例的基础上,通过使用针对平板设备的 .col-sm-* 类,我们来创建更加动态和强大的布局吧。

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
  1. <div class="row"> 
  2.   <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> 
  3.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
  4. </div> 
  5. <div class="row"> 
  6.   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
  7.   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
  8.   <!-- Optional: clear the XS cols if their content doesn't match in height --> 
  9.   <div class="clearfix visible-xs-block"></div> 
  10.   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
  11. </div>

CTRL + D 收藏本页

学习导航


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