Bootstrap入门-栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

在v3版本中手机屏幕根据viewport分为4种，超小屏幕xs，小屏幕sm，中等屏幕md和大屏幕lg；

在v4版本中手机屏幕根据viewport分为5种，超小屏幕，小屏幕sm，中等屏幕md，大屏幕lg和超大屏幕xl；

 

1.列偏移

有的时候，我们不想让两个相邻的列挨在一起，这时候利用栅格系统的列偏移（offset）功能来实现，而不必再定义margin值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度：

实现此效果只需要在下一个列上应用offset样式即可（因为该样式设置的是margin-left）。
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

有多少个offset，就有多少个margin-left。
.col-md-offset-12 {  margin-left: 100%;}
.col-md-offset-11 {  margin-left: 91.66666666666666%;}
.col-md-offset-10 {  margin-left: 83.33333333333334%;}
.col-md-offset-9 {  margin-left: 75%;}
.col-md-offset-8 {  margin-left: 66.66666666666666%;}
.col-md-offset-7 {  margin-left: 58.333333333333336%;}
.col-md-offset-6 {  margin-left: 50%;}
.col-md-offset-5 {  margin-left: 41.66666666666667%;}
.col-md-offset-4 {  margin-left: 33.33333333333333%;}
.col-md-offset-3 {  margin-left: 25%;}
.col-md-offset-2 {  margin-left: 16.666666666666664%;}
.col-md-offset-1 {  margin-left: 8.333333333333332%;}
.col-md-offset-0 {  margin-left: 0;}