添加XXL和XXXL断点。什么是container-max-widths?

Mac*_*urt 2 twitter-bootstrap bootstrap-4

我想在Bootstrap 4.x中添加XXL和XXXL断点

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px,
    xxxl: 1600px
  );
Run Code Online (Sandbox Code Playgroud)

我知道我还需要设置$ container-max-widths,但是我不确定数学是什么。我认为这与30px的边距有关。什么是数学运算和/或应该为XXL和XXXL使用的数字是多少

$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl:  ????,
    xxxl: ????
  )
Run Code Online (Sandbox Code Playgroud)

为什么是720换768?我真正想知道的是我要为XXL(1440)和XXXL(1600)输入什么?

bhm*_*ler 6

在计算容器宽度时,它们应确保按照此注释中的所有宽度可被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
)
Run Code Online (Sandbox Code Playgroud)

  • 我谢谢你先生。我很沮丧,因为我想花时间编写业务逻辑,而不是“修复”引导程序。在我看来,他们真的应该考虑所有这些更大的显示器。我有一台 1920 的显示器,我的 XL 柱子太大了……希望这能让我更接近……谢谢! (3认同)