bootStrap的栅格网格系统

注意: 网格系统必须使用到css

container、row 、xs (xsmall phones)，sm (small tablets)，md (middle desktops)，lg (larger
desktops) 即: 超小屏(自动)，小屏(750px)，中屏(970px)和大屏(1170px)
数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12,则自动换到下一行。具体内容应当放置在列容器（column）之内。
1：列组合：列数加起来不能超过12，超过12则会跳到下一行
2：列偏移：只需要在列元素上添加类名"col-md-offset-*"(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。但是总数不超过12

<div class="container">
    <div class="row">
     <div class="col-md-1">1列</div>
     <div class="col-md-1">2列</div>
     <div class="col-md-1 col-md-offset-8">11列</div>
     <div class="col-md-1">12列</div>
 </div>
</div>

3.列排序：列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)。往前pull，往后push。如果目的地有其他的东西，就会被覆盖

			<!-- 列元素  向后推一位-->
				<div id="" class="col-md-2 col-md-push-1" style="background-color:green;">
					2
				</div>

4.列嵌套：
每一个列又都可以被成功的分成12份

			<!-- 行元素 -->
			<div class="row">
				<!-- 列元素 -->
				<div class="col-md-6" style="background-color: #1B6D85;">
					<!-- //把六又分成9和3 -->
					<div id="" class="row">
						<div id="" class="col-md-9" style="background-color: #1B6D85;">
							9
						</div>
						<div id="" class="col-md-3" style="background-color: rosybrown;">
							3
						</div>
					</div>
				</div>
				<!-- 列元素 -->
				<div id="" class="col-md-6" style="background-color: grey;">
					6
				</div>
			</div>

对于不同屏幕大小：