bootstrap栅格系统源码分析

bootstrap栅格系统源码分析

1. 容器

1. 流体容器&固定容器 公共样式
   margin-right: auto;
   margin-left: auto;
   padding-left: 15px;
   padding-right: 15px
   公共代码

.container-fixed(@gutter: @grid-gutter-width) {   //30px,槽宽
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));   //15px
  padding-right: ceil((@gutter / 2));  //15px
  &:extend(.clearfix all);
}

2. 固定容器 container

						     阀值                                 width
					xs(小于768px)	                             auto    //未设置    自动
					sm（大于等于768px）                        720px+槽宽
					md（大于等于992px）                        940px+槽宽
					lg（大于等于1200px）                        1140+槽宽

//@grid-gutter-width  30px  槽宽
 @media (min-width: @screen-sm-min) {
          768px
    width: @container-sm;              // (720px + @grid-gutter-width);
  }
  @media (min-width: @screen-md-min) {
        992px 
    width: @container-md;     //(940px + @grid-gutter-width);
  }
  @media (min-width: @screen-lg-min) {
         1200px
    width: @container-lg;   //(1140px + @grid-gutter-width);
  }

2. 行 row

		  margin-left:  -15px;
		margin-right: -15px;

源码：

	.row {
   
	  .make-row();
	}
	.make-row(@gutter: @grid-gutter-width) {
       //槽宽30px
	  margin-left:  ceil((@gutter / -2));      // margin-left:-15px
	  margin-right: floor((@gutter / -2));    // margin-right:-15px
	  &: