如何将 xxl 和 xxxl 引导断点添加到 react-strap 应用程序

【问题标题】：how to add xxl and xxxl bootstrap breakpoints to react-strap app如何将 xxl 和 xxxl 引导断点添加到 react-strap 应用程序
【发布时间】：2020-08-18 08:35:49
【问题描述】：

我想为大型桌面显示器的 react-strap 应用程序添加两个额外的断点（如提到的here）。我正在使用airframe 模板，但不知道该怎么做。

【问题讨论】：

标签： reactjs bootstrap-4 reactstrap

【解决方案1】：

无论您在哪里保存变量覆盖，都会添加新的断点。这里我添加了 xxl 断点。

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

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

然后在你的组件上你必须使用实际的类名

<Col className="col-xxl-6" lg="12" xl="8">

</Col>

【讨论】：

你放置所有其他变量的地方。这完全取决于你。有些人创建自己的变量覆盖文件。有些人将它们放在他们的主 .scss 文件中。