如何组织额外的网格层答案

【问题标题】：How to organize an extra grid tier如何组织额外的网格层
【发布时间】：2021-02-10 22:04:36
【问题描述】：

我正在尝试像这样自定义网格：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 做出反应。

您能否帮助我了解这是否可能。如果是，如何组织一个额外的网格层。

【问题讨论】：

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

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

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

Demo

【讨论】：