此篇会教学如何将 Bootstrap container 容器，自干一个出来。

若是使用 Wrapper 的朋友，可以参考：浅谈 Container Wrapper 差异，这篇有探讨几个 Container 和 Wrapper 的差异。

Container 是格线系统中的排版三剑客之一，若还不熟悉的朋友，可以参考：Gird System 格线系统，这篇有简单介绍 Gird System 格线系统的原理以及使用技巧。

原始码

使用到三只档案：

_containers.scss：容器主要执行入口。

mixins/_container.scss：负责生成满版容器样式。

mixins/_breakpoints.scss：负责撰写 @media 响应式的断点样式。

Container 容器

简单介绍一下 container 特性以及不同种的容器。

特性

• 设置容器大小。
• 容器水平置中。
• 不会贴齐萤幕边界。

种类

• container：设置一个对应的最大宽度 max-width。
• container-fluid：每个断点都是满版宽度 width: 100%。
• container-断点：在装置尺寸 小於等於 指定断点情况下都是满版宽度 width: 100%。

粗略拆为五个步骤讲解

Step1：判断是否有启用生成格线系统

透过选项 (Options)设置 $enable-grid-classes 来判断是否要生成 grid 样式。（预设是 true）

@if $enable-grid-classes {
}

Step2：产生容器满版样式

产生 container、container-fluid 满版样式

.container,
.container-fluid {
  @include make-container();
}

make-container 来自於 mixins/_container.scss 这只主要生成满版容器样式的档案。

@mixin make-container($gutter: $container-padding-x) {
  width: 100%;
  padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
  padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
  margin-right: auto;
  margin-left: auto;
}

设置容器大小

• width: 100%

容器水平置中

• margin-left: auto、margin-right: auto
• 设置左右 margin auto，使萤幕装置尺寸超过 max-width 设置时，不会再跟随装置放大下去。

不会贴齐萤幕边界

• 设置左右 padding 间距，使容器大小和装置尺寸时不会贴齐萤幕，不然会很丑。

编译後的 css

.container, .container-fluid {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

Step3：产生断点容器满版样式

依照 $container-max-widths 断点设置，产生所有断点容器满版样式。

@each $breakpoint, $container-max-width in $container-max-widths {
  .container-#{$breakpoint} {
    @extend .container-fluid;
  }
}

透过回圈将 $container-max-widths 断点的参数读取出来，并设置和 .container-fluid 相同的样式。

编译後的 css

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

Step4：设置断点 @media 样式

@each $breakpoint, $container-max-width in $container-max-widths {
}

media-breakpoint-up 来自於 mixins/_breakpoints.scss。

@content：代表之後生成的样式。

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

Step5：设置容器响应式样式

设置容器响应式样式，这步骤的样式会回传到 Step4 的 @content 中。

breakpoint-infix() 函式：取得断点的 point，回传一个 point 加上 - 符号的字串（ex：-md）。

@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
  %responsive-container-#{$breakpoint} {
    max-width: $container-max-width;
  }

  $extend-breakpoint: true;

  @each $name, $width in $grid-breakpoints {
    @if ($extend-breakpoint) {
      .container#{breakpoint-infix($name, $grid-breakpoints)} {
        @extend %responsive-container-#{$breakpoint};
      }

      @if ($breakpoint == $name) {
        $extend-breakpoint: false;
      }
    }
  }
}

Bootstrap 属於手机优先，因此断点设置是从小大到写，代表预设是最小，而越大的断点会将比较小的样式覆盖过去。

• 最外层回圈 $container-max-widths 所读取到的 key 和内层回圈的 $grid-breakpoints key 值判断，若值相同则此次 $grid-breakpoints 回圈则不再写入样式，直到下一次 $grid-breakpoints 才会再重新判断是否可写入。
• $grid-breakpoints key（ex：sm、md）小於等於 $container-max-widths key 时，会将 key 当作断点 前缀字 写到样式名称中（ex：.container-xxl, .container-xl），因此越後面写入的样式名称会越多

编译後的 css

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

此次范例 CodePen 传送门：