代码之家 › 专栏 › 技术社区 › Maccurt

添加XXL和XXXL断点。集装箱最大宽度是多少?

bootstrap-4 twitter-bootstrap

0

Maccurt · 技术社区 · 7 年前

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

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

我知道我还需要设置$container的最大宽度,但我不确定数学是什么。我认为这与30倍的利润率有关。计算这个数字的数学方法是什么和/或我应该用什么数字来表示XXL和XXXL

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

为什么768是720? 我真正想知道的是我在XXL(1440)和XXXL(1600)中加入了什么?

1 回复 | 直到 7 年前

1

1

hawkstrider 7 年前

在计算容器宽度时,它们确保所有宽度都可以根据此指责中的注释被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
)

推荐文章

xajetin · 导航不更改滚动上的颜色

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

4 年前

Bryan Santos · 固定表头与引导

4 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

4 年前

tym · 根据用户偏好显示字段

4 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

8 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

8 年前

Alexander David · 折叠卡打开,然后立即再次关闭

8 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

8 年前

关于移动版

代码之家 - 一站式码农服务社区

沪ICP备11025650号