将 XXXL 添加到引导程序答案

【问题标题】：Add XXXL to Bootstrap将 XXXL 添加到引导程序
【发布时间】：2021-10-23 00:05:07
【问题描述】：

我观看了tutorial 自定义默认 Boostrap 代码并阅读了这篇文章 Adding XXL & XXXL breakpoints. What is container-max-widths?。

很遗憾，我无法让 Google Chrome 或 Firefox 识别 XXL 或 XXXL。

main.scss

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

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

@import "node_modules/bootstrap/scss/bootstrap";

main.css

main.css 有 9438 行，所以我把它贴在这里 - https://codeshare.io/lovOdm。

【问题讨论】：

标签： html css bootstrap-4 sass

【解决方案1】：

由于我们将所有 Bootstrap CSS 代码导入 main.css，我们不再需要链接到默认的 Bootstrap CSS 样式表。

<!-- Bootstrap CSS - No longer needed -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->

但是在查看 Inspect Elements 之后，我注意到我链接到了错误的 main.css。

我正在链接到这个。

<link rel="stylesheet" type="text/css" href="{% static "main.css" %}">

而我刚刚将 Bootstrap 代码复制到了这个

我不想干扰 blog/static 中的 main.css，所以我在 blog/static 中创建了一个 main1.css。

在终端我跑了C:\Users\ACER\Documents\Django Projects\EcommerceProject>scss main.scss blog/static/main1.css

而之前我在终端运行的是C:\Users\ACER\Documents\Django Projects\EcommerceProject>scss main.scss main.css

然后每当我想使用引导代码时，我都会引用这个样式表

<link rel="stylesheet" type="text/css" href="{% static "main1.css" %}">

【讨论】：