2.boostrap栅格的实现原理

使用@media媒体查询,把一个row平分成12等份,不用的尺寸显示不同的大小

<!-- 屏幕等分 12
        pc 6
        ipad 4
        iphone 3
-->
<div class="row">
        <div class="col-md-2 col-sm-3 col-xs-4" >
            <img src="images/item02.jpg">
        </div>
        <div class="col-md-2 col-sm-3 col-xs-4" >
            <img src="images/item02.jpg">
        </div>
        <div class="col-md-2 col-sm-3 col-xs-4" >
            <img src="images/item02.jpg">
        </div>
</div>

@media (min-width:992px){
    .col-md-2{
        width: 16.666%;
    }
}
@media (min-width:768px) and (max-width:992px){
    .col-sm-3{
        width: 25%;
    }
}
@media (max-width:768px){
    .col-xs-4{
        width: 33.333%;
    }
}
div{
    box-sizing: border-box;
}
div img{
    width: 100%;
    height: 100%;
}
[class^="col"]{
    float: left;
    border: 1px solid #333;
    height: 250px;
}
.row::after{
    content: "";
    display: table;
    clear: both;
}