twitter-bootstrap - 添加 XXL 和 XXXL 断点。什么是容器最大宽度？

Question

我想在 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: ????
  )

为什么768是720？ 我真正想知道的是，我为 XXL(1440) 和 XXXL(1600) 输入了什么？

Answer 1

在计算容器宽度时，他们确保所有宽度都可以被 12 整除，根据这个责备中的评论。 https://github.com/twbs/bootstrap/blame/dd539094ea6722489c5ba940523691edc556b6a3/scss/_variables.scss

这是提到可被 12 整除的要求的提交
https://github.com/twbs/bootstrap/commit/0ba0f19003b8d118801fca94dcacc908fd4ddd70

它们似乎都可以被 10 整除，并且至少比网格断点小 30px。

按照该模式，值将是

$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1380px,
    xxxl: 1560px
)