标签：bootstrap c89 margin ack title table alt art pad
在百度前端学院做任务的时候，看到有关于bootstrap的栅格系统的知识于是就在网上百度了一番，下边的网址是关于bootstrap栅格系统的详细解析，https://segmentfault.com/a/1190000000743553。
http://www.cnblogs.com/JerryTao/p/5476027.html。
http://blog.csdn.net/z742182637/article/details/50466674。
了解之后栅格系统就可以相互嵌套了。这里有我写的demo:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>百度前端：响应式栅格布局</title> 6 <style> 7 html,body{ 8 margin: 0; 9 padding: 0; 10 } 11 12 .container{ 13 box-sizing: border-box; 14 border: 1px solid #999; 15 padding: 10px; 16 } 17 .row{ 18 color:red; 19 margin: -10px; 20 } 21 .row:after, .row:before{ 22 content: ""; 23 display: table; 24 clear: both; 25 } 26 27 .col{ 28 box-sizing: border-box; 29 border: 1px solid #999; 30 background-color: #EEE; 31 height: 50px; 32 margin: 10px; 33 float: left; 34 35 } 36 @media only screen and (min-width: 769px) { 37 .col-md-1{ 38 width: calc(8.333% - 20px); 39 } 40 41 .col-md-2{ 42 width: calc(16.666% - 20px); 43 } 44 45 .col-md-3{ 46 width: calc(25% - 20px); 47 } 48 49 .col-md-4{ 50 width: calc(33.333% - 20px); 51 } 52 53 .col-md-6{ 54 width: calc(50% - 20px); 55 } 56 } 57 58 @media only screen and (max-width: 768px) { 59 .col-sm-2{ 60 width: calc( 16.666% - 20px); 61 } 62 .col-sm-3{ 63 width: calc( 25% - 20px); 64 } 65 .col-sm-6{ 66 width: calc( 50% - 20px); 67 } 68 .col-sm-8{ 69 width: calc( 66.666% - 20px); 70 } 71 .col-sm-12{ 72 width: calc( 100% - 20px); 73 } 74 } 75 </style> 76 </head> 77 <body> 78 <div class="container"> 79 80 <div class="row"> 81 <div class="col-md-4 col-sm-6 col"> 82 四栏 六栏 83 </div> 84 85 <div class="col-md-4 col-sm-6 col"> 86 四栏 六栏 87 </div> 88 89 <div class="col-md-4 col-sm-12 col"> 90 四栏 十二栏 91 </div> 92 93 </div> 94 95 <div class="row"> 96 <div class="col-md-3 col-sm-3 col"> 97 三栏 三栏 98 </div> 99 <div class="col-md-6 col-sm-6 col"> 100 六栏 六栏 101 </div> 102 <div class="col-md-3 col-sm-3 col"> 103 三栏 三栏 104 </div> 105 </div> 106 107 <div class="row"> 108 <div class="col-md-1 col col-sm-2"> 109 一栏 二栏 110 </div> 111 <div class="col-md-1 col col-sm-2"> 112 一栏 二栏 113 </div> 114 <div class="col-md-2 col col-sm-8"> 115 二栏 八栏 116 </div> 117 <div class="col-md-2 col col-sm-3"> 118 二栏 三栏 119 </div> 120 <div class="col-md-6 col col-sm-3"> 121 六栏 三栏 122 </div> 123 124 </div> 125 </div> 126 </body> 127 </html>
标签：bootstrap c89 margin ack title table alt art pad
原文地址：http://www.cnblogs.com/gaoxuerong123/p/7221396.html
