如何组织额外的网格层

Question

我正在尝试像这样自定义网格：https://getbootstrap.com/docs/5.0/layout/grid/#customizing-the-grid

即我想添加一个网格选项（即xxs）。

我创建了 custom.css:

 $grid-breakpoints: (
  xxs: 0,
  xs: 375px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (  
  xxs: 330px,
  xs: 505px,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

@import "bootstrap-5.0.0-beta1/scss/bootstrap";

真的出现了一个额外的媒体请求。而这个 xxs 断点确实适用于容器宽度。请看图

但如果我没记错的话，它不是网格层。此代码无效：

这个 ‍

col-xxs-1 根本不起作用。我检查了编译过程中生成的css。也就是说，我试图在那里找到“xxs”。只有两种情况。它们都是关于 .container-xxs 的。图片已附上。

因此，列不会对 col-xxs 做出反应。

你能帮我理解这是否可能吗？如果是，如何组织额外的网格层。

Answer 1

它应该可以正常工作，但请记住，您正在用 xxs 替换“默认”层 xs，因此 xxs 成为新的隐含断点并且不会使用一个中缀。将添加 col-xs-* 的新分类。例如...

col-1 (xxs)
col-xs-1 (xs)

Demo

如何组织额外的网格层

How to organize an extra grid tier

twitter-bootstrap

bootstrap-5