bootstrap栅格系统源码分析_bootstrap博客源码-优快云博客

本文链接：https://blog.youkuaiyun.com/l_x_cser/article/details/104581614

本文详细分析了Bootstrap栅格系统的源码，包括容器的流体和固定样式，行(row)的实现，以及列(column)的复杂配置，特别是执行.make-grid-columns和不同屏幕尺寸的.make-grid过程。在总结中强调了在创建列排序时遵循尺寸顺序的重要性，以避免选择器错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap栅格系统源码分析

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);
}

固定容器 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
	  &:extend