<div class="row col-xs-4"> <button class="btn btn-block btn-info">Info</button> </div>以上代码表示 在这一行(row)中做12列格网布局,其中他占4分大小-->
格网布局由行(row)和列(column)构成。
使用容器包裹栅格系统:container,container-fluid
槽宽:每列左右都有15px
col-xs 超小屏幕手机(<768px) 最大列宽:自动 col-sm 小屏幕平板(>=768px) 最大列宽:62px col-md 中等屏幕桌面显示器(>=992px) 最大列宽:81px col-lg 大屏幕桌面显示器(>=1200px) 最大列宽:97px
<div class="row"> <div class="col-sm-4"></div> <div class="col-sm-4 col-sm-offset-4"></div> </div>使用 .col-sm-offset-*类可以将列向右侧偏移。
这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。
例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>col-md-push-3的意思为让此类向后推3列;
col-md-pull-9的意思为让此类向前推9列;