Bootstrap增加Container大小,container-xxl,1600px

下面是Bootstrap的container容器大小,根据媒体查询的宽度来限制container的宽度:

Extra small

<576px
Small

≥576px
Medium

≥768px
Large

≥992px
X-Large

≥1200px
XX-Large

≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

如果1920px宽度的分辨率,想container再大一些,增加个.container-xxxl,1600px以上,限制1400px。

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 1600px // Add this line
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
  xxxl: 1440px // Add this line
);

@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;

  @each $breakpoint, $container-max-width in $container-max-widths {
    @if $container-max-width != null {
      @include media-breakpoint-up($breakpoint) {
        max-width: $container-max-width;
      }
    }
  }
}

参考文档:

本条目发布于。属于软件分类。作者是

关于有个狸

2005年开始的一名站长,从事网站策划、运营,早期一批扎根阿里妈妈、Google Adsense的一员,目前司职前端与产品设计。

发表回复