下面是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;
}
}
}
}
参考文档: