Bootstrap 网格系统

网格容器

<!--固定宽度的网格容器-->
<div class="container">
</div>
<!--与窗口等宽的非固定宽度网格容器(横向铺满)-->
<div class="container-fluid">
</div>

网格中行与列

<!--固定宽度的网格容器-->
<div class="container">
    <!--行-->
    <div class="row">
        <!--宽度占本行的3/12的列-->
        <div class="col-md-3">第1列</div>
        <div class="col-md-3">第2列</div>
        <div class="col-md-3">第3列</div>
    </div>
</div>

列的媒体查询

可以根据屏幕宽度自动调整列所占屏幕宽度的比例

• 超小屏幕 宽度<768px 手机 类前缀.col-xs-
• 小型屏幕 宽度>=768px 平板 类前缀.col-sm-
• 中型屏幕 宽度>=992px 桌面 类前缀.col-md-
• 大型屏幕 宽度>=1200px 桌面 类前缀.col-lg-

列的偏移

• 如.col-md-offset-1 右移动1列
• 如.col-md-pull-2 左移动2列

下面的例子会调换两列的显示位置

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-push-6">第1列</div>
        <div class="col-md-6 col-md-pull-6">第2列</div>
    </div>  
</div>