添加XXL& XXXL断点.什么是container-max-widths? [英] Adding XXL & XXXL breakpoints. What is container-max-widths?

问题描述

我想在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)输入什么?

解决方案

在计算容器的宽度时，它们应确保所有宽度均能按此注释中的12整除. https://github.com/twbs/bootstrap/blame/dd539094ea6722489c5ba940523a/_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
)

I want to add XXL and XXXL break points in bootstrap 4.x

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

I know I need to also set the $container-max-widths, but I am not sure what the math is. I think it has something to do with the 30px margin. What is the math to calculate that and/or what is the numbers I should use for XXL and XXXL

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

Why is it 720 for 768? What I really want to know is what do I put in for XXL(1440) and XXXL(1600)?

解决方案

When calculating the container widths they ensure that all widths are divisible by 12 as per the comments in this blame. https://github.com/twbs/bootstrap/blame/dd539094ea6722489c5ba940523691edc556b6a3/scss/_variables.scss

Here is the commit that mentions the divisible by 12 requirement https://github.com/twbs/bootstrap/commit/0ba0f19003b8d118801fca94dcacc908fd4ddd70

They also all appear to be divisbile by 10 and at least the 30px less than the grid breakpoint.

Following that pattern the values would be

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

这篇关于添加XXL& XXXL断点.什么是container-max-widths?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！