我想在Bootstrap 4.x中添加XXL和XXXL断点
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1440px,
xxxl: 1600px
);
我知道我还需要设置$ container-max-widths,但是我不确定数学是什么。我认为这与30px的边距有关。什么是数学运算和/或应该为XXL和XXXL使用什么数字
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: ????,
xxxl: ????
)
为什么720换720? 我真正想知道的是我要为XXL(1440)和XXXL(1600)输入什么?
答案 0 :(得分:1)
在计算容器的宽度时,它们应确保根据该注释中的所有宽度可被12整除。 https://github.com/twbs/bootstrap/blame/dd539094ea6722489c5ba940523691edc556b6a3/scss/_variables.scss
以下是提到可被12整除的提交 https://github.com/twbs/bootstrap/commit/0ba0f19003b8d118801fca94dcacc908fd4ddd70
它们看上去也都比网格断点小10倍,至少至少30像素。
遵循该模式,数值将为
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1380px,
xxxl: 1560px
)