bootstrap 网格布局

一：基本的网格布局

<div class="container">

<div class="row">

<div class="col-md-4">占四格</div>

<div class="col-md-6">占八格</div>

</div>

</div>

1、一行网格数一共有分为12格，

<div class="col-md-4">占四格</div>：表示一列占4格

<div class="col-md-8">占八格</div>：表示一列占8格

两列加起来一共是12格。

不论分为多少列，加起来格数必须是12格

2、col-md-4是什么意思

col-md-：表示显示页面尺寸>992px ；4：表示一列占多少格数

3、显示页面尺寸

<768px使用.col-xs-格数

>=768px使用.col-sm-格数

>=992px使用.col-md-格数

>=1200px使用.col-lg-格数

 

4、偏移

右偏移：<div class="col-md-4 col-md-push-8">占四格，往右偏移8格</div>

左偏移：<div class="col-md-8  col-md-pull-4">占8格，往左偏移4格</div>

5、嵌入

<div class="container">

<div class="row">

 

<div class="col-md-4">

<div class="row">

<div class="col-md-4">占四格</div>

<div class="col-md-4">占四格</div>

<div class="col-md-4">占四格</div>

        </div>

</div>

 

<div class="col-md-8">占八格</div>

</div>

</div>

上述例子：一条网格分为两列，第一列占四格，第二列占8格，

                  在第一列嵌入一条3列网格，每列都占四格

 

转载于:https://www.cnblogs.com/love-or/p/8889810.html