mui--栅格系统

mui中定义了一个简单适用的栅格系统，将每一行宽度平均分为12份，每一份作为一个子栅格，每一行的内容置于.mui-row行容器中，通过.mui-col-xs-*和.mui-col-sm-*将行分成若干行。使用以下媒体查询（media query）将.mui-row像素宽度400px作为分界，.mui-row像素宽度低于400px的使用.mui-col-xs-*，当.mui-row像素宽度高于400px使用.mui-col-sm-*。.mui-row宽度若不设置，默认为屏幕像素宽度。

通过给每一行中的列设置1~12的数值，相应列的宽度会随着.mui-row像素宽度变化。若一行中列的数值和大于12，多余的列所在元素会作为一个整体另起一行排列。

<style type="text/css">  
    .mui-row{  
        height: 50px;  
        line-height: 50px;  
        text-align: center;   
    }  
    .mui-col-sm-3{  
        border: 1px solid #aaa;  
    }  
    .mui-col-sm-9{  
        border: 1px solid #aaa;  
    }  
</style>  
<div class="mui-row">  
    <div class="mui-col-xs-4 mui-col-sm-3">  
        .mui-col-sm-3  
    </div>  
    <div class="mui-col-xs-8 mui-col-sm-9">  
        .mui-col-sm-9  
    </div>  
</div>

这样我们得到了两列元素，当.mui-row像素宽度低于400px时，左侧宽度为4份子栅格宽度，右侧宽度为8份子栅格宽度；当.mui-row像素宽度高于400px时，左侧宽度为3份子栅格宽度，右侧宽度为9份子栅格宽度。