标签：nbsp 居中 containe uikit contain lap 网格 .com bsp
UIkit网格最多可以分为10列
将可视区域宽度分为3列
<div class="uk-grid"> <div class="uk-width-1-3"></div> <div class="uk-width-1-3"></div> <div class="uk-width-1-3"></div> </div>
响应式宽度
排水沟 .uk-grid-X
<div class="uk-grid uk-grid-large"> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> </div>
.uk-grid-large可以换成medium、small、collapse（无空隙）
网格的嵌套
<div class="uk-grid uk-grid-large"> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-3"> <div class="uk-grid"> <div class="uk-width-1-2"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-2"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> </div> </div> <div class="uk-width-1-3"> <div class="uk-grid"> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> </div> </div> </div>
结果如图：
关键：每划分一次网格，加一层.uk-grid，在其中划分出.uk-width-X
有.uk-grid就必须有.uk-width-X，反之亦然
不要求必须填满一行
居中网格 .uk-container-center
<div class="uk-grid"> <div class="uk-width-1-3 uk-container-center"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>javascript(0)</code> </div> </div> </div>
标签：nbsp 居中 containe uikit contain lap 网格 .com bsp
原文地址：http://www.cnblogs.com/jiaoxuanwen/p/7007504.html
