栅格实例:从堆叠到水平排列

W3CSchool > bootstrap3中文手册 > Bootstrap 响应式布局 > 栅格实例:从堆叠到水平排列

实例:从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
  1. <div class="row"> 
  2.   <div class="col-md-1">.col-md-1</div> 
  3.   <div class="col-md-1">.col-md-1</div> 
  4.   <div class="col-md-1">.col-md-1</div> 
  5.   <div class="col-md-1">.col-md-1</div> 
  6.   <div class="col-md-1">.col-md-1</div> 
  7.   <div class="col-md-1">.col-md-1</div> 
  8.   <div class="col-md-1">.col-md-1</div> 
  9.   <div class="col-md-1">.col-md-1</div> 
  10.   <div class="col-md-1">.col-md-1</div> 
  11.   <div class="col-md-1">.col-md-1</div> 
  12.   <div class="col-md-1">.col-md-1</div> 
  13.   <div class="col-md-1">.col-md-1</div> 
  14. </div> 
  15. <div class="row"> 
  16.   <div class="col-md-8">.col-md-8</div> 
  17.   <div class="col-md-4">.col-md-4</div> 
  18. </div> 
  19. <div class="row"> 
  20.   <div class="col-md-4">.col-md-4</div> 
  21.   <div class="col-md-4">.col-md-4</div> 
  22.   <div class="col-md-4">.col-md-4</div> 
  23. </div> 
  24. <div class="row"> 
  25.   <div class="col-md-6">.col-md-6</div> 
  26.   <div class="col-md-6">.col-md-6</div> 
  27. </div>

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

学习导航


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