简单了解十二栅格
十二栅格是一种响应式布局方式，它的大体思想是，将父元素的宽度等性的分成12栏，利用 @media 去给每一个元素在不同屏幕下设置为占据不同栏数宽度，例如，某个元素，在大屏是占整个父元素的3栏（一行有4个相同元素），在中屏占整个父元素的6栏（一行有2个相同元素），在小屏占整个父元素的12栏（独占一行）。
下面是我模仿bootstrap自己写的一个简易十二栅格系统：
1 .container{ 2 display: block; 3 height: auto; 4 margin: 0 auto; 5 } 6 7 .container-fliud{ 8 width: 100%; 9 display: block; 10 height: auto; 11 } 12 13 .row:after { 14 content: " "; 15 display: block; 16 clear: both; 17 } 18 19 .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6, 20 .col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12, 21 .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6, 22 .col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12, 23 .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6, 24 .col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12, 25 .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6, 26 .col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 { 27 display: block; 28 padding-right: 15px; 29 padding-left: 15px; 30 box-sizing: border-box; 31 } 32 33 .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6, 34 .col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11, 35 .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6, 36 .col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11, 37 .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6, 38 .col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11, 39 .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6, 40 .col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11 41 { 42 float: left; 43 } 44 45 /*超小屏幕 手机*/ 46 @media screen and (max-width: 768px){ 47 .col-xs-1 { width: 8.333333%;} 48 .col-xs-2 { width: 16.666667%;} 49 .col-xs-3 { width: 25%;} 50 .col-xs-4 { width: 33.333333%;} 51 .col-xs-5 { width: 41.666667%;} 52 .col-xs-6 { width: 50%;} 53 .col-xs-7 { width: 58.333333%;} 54 .col-xs-8 { width: 66.666667%;} 55 .col-xs-9 { width: 75%;} 56 .col-xs-10 { width: 83.333333%;} 57 .col-xs-11 { width: 91.666667%;} 58 .col-xs-12 { width: 100%;} 59 .col-xs-hidden { display: none;} 60 } 61 62 /*屏幕大于768 平板*/ 63 @media screen and (min-width: 768px) and (max-width: 992px) { 64 .container { max-width: 750px;} 65 .col-sm-1 { width: 8.333333%;} 66 .col-sm-2 { width: 16.666667%;} 67 .col-sm-3 { width: 25%;} 68 .col-sm-4 { width: 33.333333%;} 69 .col-sm-5 { width: 41.666667%;} 70 .col-sm-6 { width: 50%;} 71 .col-sm-7 { width: 58.333333%;} 72 .col-sm-8 { width: 66.666667%;} 73 .col-sm-9 { width: 75%;} 74 .col-sm-10 { width: 83.333333%;} 75 .col-sm-11 { width: 91.666667%;} 76 .col-sm-12 { width: 100%;} 77 .col-sm-hidden { display: none;} 78 } 79 80 /*屏幕大于992 桌面*/ 81 @media screen and (min-width: 992px) and (max-width: 1200px){ 82 .container { max-width: 970px;} 83 .col-md-1 { width: 8.333333%;} 84 .col-md-2 { width: 16.666667%;} 85 .col-md-3 { width: 25%;} 86 .col-md-4 { width: 33.333333%;} 87 .col-md-5 { width: 41.666667%;} 88 .col-md-6 { width: 50%;} 89 .col-md-7 { width: 58.333333%;} 90 .col-md-8 { width: 66.666667%;} 91 .col-md-9 { width: 75%;} 92 .col-md-10 { width: 83.333333%;} 93 .col-md-11 { width: 91.666667%;} 94 .col-md-12 { width: 100%;} 95 .col-md-hidden { display: none;} 96 } 97 98 /*屏幕大于1200 大桌面*/ 99 @media screen and (min-width: 1200px) { 100 .container { max-width: 1170px;} 101 .col-lg-1 { width: 8.333333%;} 102 .col-lg-2 { width: 16.666667%;} 103 .col-lg-3 { width: 25%;} 104 .col-lg-4 { width: 33.333333%;} 105 .col-lg-5 { width: 41.666667%;} 106 .col-lg-6 { width: 50%;} 107 .col-lg-7 { width: 58.333333%;} 108 .col-lg-8 { width: 66.666667%;} 109 .col-lg-9 { width: 75%;} 110 .col-lg-10 { width: 83.333333%;} 111 .col-lg-11 { width: 91.666667%;} 112 .col-lg-12 { width: 100%;} 113 .col-lg-hidden { display: none;} 114 }
