栅格系统
Posted zxh-null
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了栅格系统相关的知识，希望对你有一定的参考价值。
容器类名：box、wrap、wrapper、content、container
栅格系统的容器：
固定宽居中：container
0-768：移动端 768-992：pad端 992-1200：pc端 1200-：pc端宽屏
xs sm md lg
100% 750px 970px 1170px
全屏（百分百）：container-fluid（自身带有左右padding的15px）
子元素需要实现全屏时需要加上 左右外边距-15px
（ margin-left:-15px;margin-right:-15px; ）
先写行再写列(若设定范围为sm则在md、lg、都会以sm样式展示)
行：row 列：col
辅助工具（只在规定范围内执行）：
hidden-* (范围)隐藏
visible-* (范围)显示
列偏移： col-*(范围)-offset-1(数量)
注意：列的偏移作用在它自身范围以及比它大的范围
如果之作用在当前范围，则需要声明更宽范围偏移为0 ;
列排序：
向右：col-*-push-*
向左：col-*-pull-*
注意：列的偏移作用在它自身范围以及比它大的范围
如果之作用在当前范围，则需要声明更宽范围排序为0 ;
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 bo-red">
<div class="row">
<div class="col-sm-6 bo-red">4</div>
<div class="col-sm-6 bo-red">4</div>
</div>
</div>
<div class="col-sm-4 bo-red">4</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="border yellow col-sm-3 col-sm-push-9 col-xs-push-0 col-xs-3 hidden-md col-lg-10 col-lg-push-0 col-lg-offset-1 col-xs-offset-0 "></div>
<div class="border red col-sm-4 col-sm-pull-1 col-xs-pull-0 col-xs-4 hidden-md hidden-lg"></div>
<div class="border blue col-sm-3 col-sm-pull-1 hidden-xs col-md-5 col-md-pull-0 hidden-lg"></div>
<div class="border green col-sm-2 col-sm-pull-10 col-xs-pull-0 col-xs-5 col-md-7 col-md-pull-0 hidden-lg"></div>
</div>
</div>
以上是关于栅格系统的主要内容，如果未能解决你的问题，请参考以下文章