如何使用 CDN 在 bootstrap 4 中创建新断点？

Posted 2023-02-22

技术标签:

【中文标题】如何使用 CDN 在 bootstrap 4 中创建新断点？【英文标题】：How to create new breakpoints in bootstrap 4 using CDN? 【发布时间】：2018-08-02 03:30:38 【问题描述】：

我使用 BootstrapCDN。其他用 sass 编写并由 gulp 构建的样式。我需要创建自己的断点。如果我使用 CDN，是否可以制作它们？我不知道该怎么做。我必须创建这些断点：

--breakpoint-xxxs: 0;
--breakpoint-xxs: 320px;
--breakpoint-xs: 568px;
--breakpoint-sm: 667px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1440px;
--breakpoint-xxxl: 1600px;

我想得到这样的东西：

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

<div class="container">
	<div class="row">
		<div class="col col-xxxs-1 col-xxs-2 col-xs-3 col-sm-4 col-md-5 col-lg-6 col-xl-7 col-xxl-8 col-xxxl-9">
			<div style="height:100vh;background:purple">text</div>
		</div><!--col-->
	</div><!--.row-->
</div><!--.container-->

我找到了the manual，我正在尝试这个：

$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
)  !default;

$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
) !default;

:root 
  --breakpoint-xxxs: 0;
  --breakpoint-xxs: 320px;
  --breakpoint-xs: 568px;
  --breakpoint-sm: 667px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440px;
  --breakpoint-xxxl: 1600px;

但它不会产生结果，并且会产生错误：

非法嵌套：变量声明下不得嵌套任何内容。

Codepen mcve.

我做错了什么？提前感谢您的帮助。

UPD：如果那是不可能的……还有其他选择吗？我可以轻松地编辑我的代码以使用我的断点模拟引导网格吗？

UPD2：感谢@aer0，我修复了错误：

$grid-breakpoints: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

$container-max-widths: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

\:root
  --breakpoint-xxxs: 0
  --breakpoint-xxs: 320px
  --breakpoint-xs: 568px
  --breakpoint-sm: 667px
  --breakpoint-md: 768px
  --breakpoint-lg: 992px
  --breakpoint-xl: 1200px
  --breakpoint-xxl: 1440px
  --breakpoint-xxxl: 1600px

但这并不能解决我的问题。

【问题讨论】：

【参考方案1】：

根据 Github，您似乎在这里遇到了“错误”。见这里：https://github.com/sass/sass/issues/1166

话虽如此，您必须像这样将变量定义写在一行中。

$grid-breakpoints: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px) !default

【讨论】：

谢谢！它正在修复错误，但没有解决我的问题【参考方案2】：

我很惊讶没有开发人员能够回答我的问题！就连github上也没有人敢想！

其实一切都变得非常简单！

是的，我们使用 CDN 获得编译后的 css 文件。引导程序中的样式是使用 sass 编写的。此外，样式是书面分离和模块化的。所以这意味着我不需要将整个引导程序加载到我的服务器。我想提供 Bootstrap 编译 CSS 的缓存版本，我只需要添加我的断点。幸运的是，有一个特定的引导文件负责网格。是bootstrap-grid.scss：

/*!
 * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@at-root 
  @-ms-viewport  width: device-width;  // stylelint-disable-line at-rule-no-vendor-prefix


html 
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;


*,
*::before,
*::after 
  box-sizing: inherit;


@import "functions";
@import "variables";

@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";

@import "grid";
@import "utilities/display";
@import "utilities/flex";

现在我只需要从上面的文件中按顺序添加代码，添加我的断点。不需要添加非网格代码。例如，负责颜色的代码。 Here is my mcve at codepen.

【讨论】：

您对此进行了研究，尽管我认为您的问题的字面意思是来自 CDN，而不是使用 SASS。这是一个使用 SASS（不完全来自 CDN）的解决方案。这不是自定义 Bootstrap 的正确方法，因为它会更改默认断点值。正确的方法是@import bootstrap，然后覆盖你自己custom.scss中的变量/映射，即already explained in this answer 您会发现最小的断点不起作用，并且在以这种方式自定义时，所有支持的网格实用程序类（显示、间距、弹性框等）都不起作用。 @ZimSystem，在文章的最开始，我写了我使用sass @ZimSystem，您对 .xxxs 类的看法是正确的。因为在myxin中，最小的尺寸去掉前缀。我修好了，html而不是col-xxxs-1，我写了col-1。【参考方案3】：

不能完全通过 CDN 完成。要正确使用 SASS 自定义/覆盖，您需要在 custom.scss 中 @import 必要的 Bootstrap scss 文件。要覆盖网格断点，您至少需要functions 和variables。然后根据需要设置变量，最后@import bootstrap。注意默认！已被删除为explained in the docs 作为正确的自定义方法。

/* import what we need to override */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* set the overriding variables */
$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
);
$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
);

/* override the !default vars with the values we set above */
@import "bootstrap";

通过这种方法，我们添加了新的网格断点，并确保这些新断点在 Bootstrap 中无处不在工作，包括 网格、间距响应实用程序、显示、flexbox、对齐、定位等...

https://codeply.com/go/BIgmm1XGc2

另见：How to extend/modify (customize) Bootstrap 4 with SASSTwitter Bootstrap: add media queries for xxs breakpoint

【讨论】：

感谢您的回答！但我无法在工作中加载整个引导程序。它必须通过 CDN 下载。 “顾客永远是对的”。虽然这可能对其他人有用您必须从 0 开始网格断点，但我建议删除 xxxs 的容器最大宽度，否则会不必要地破坏 0 到 319px 之间的布局。重要的是要知道使用这种方法可以减少链接到原始 bootstrap.css 的需要。基本上是@import "bootstrap"；拉入原始 bootstrap.css 并将其附加到您在 css 文件中执行导入的任何自定义代码之前。【参考方案4】：

如果您只需要调整 CDN 引导程序的一部分并且不想重新编译，您可以只添加相关的媒体边界。如果您添加的断点高于 -xl-（在加载引导 .css 后加载 .css 更新）或低于 xs（在引导之前加载 .css 更新），则更容易。在中间插入断点有点棘手。

参见https://www.codeply.com/p/ROF99teYDd，我添加了 -xxl- 从 1550px 和 -mde- 开始为 840-992px ，通过复制所需的引导媒体 css 纯粹在 .css 中。

@media (min-width: 840px) and (max-width: 992px) 
 ...
 .col-mde-1 
 -ms-flex: 0 0 8.333333%;
 flex: 0 0 8.333333%;
 max-width: 8.333333%;
 
 .col-mde-2 
   -ms-flex: 0 0 16.666667%;
   flex: 0 0 16.666667%;
   max-width: 16.666667%;
 
 ...
 .col-mde-12 
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
 


@media (min-width: 1550px) 
 .col-xxl-1 
   -ms-flex: 0 0 8.333333%;
   flex: 0 0 8.333333%;
   max-width: 8.333333%;
 
...

由于插入元素使用了 min 和 max-width，我需要为 -lg- (min-width: 992px) 指定官方引导尺寸，以确保设计在此断点后不会中断。

【讨论】：

【参考方案5】：

我们现在已经 - 使用 CDN 我们得到编译后的.css。

遇到同样的问题，做了一点 CSS 扩展。

对于每个额外的断点，在原始引导 4 CDN .css 文件之后加载的 .css 样式表中（以覆盖容器最大宽度），添加以下代码：

/* BS4 Grid XXL breakpoint */

/* adding col-xxl */
.col-xxl, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto position: relative; width: 100%; padding-right: 15px; padding-left: 15px;

@media (min-width: 1570px)
  /* expanding BS4 max-width */
  .container max-width: 1540px;

  /* grid columns xxl */
  .col-xxl -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%;
  .col-xxl-auto -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none;  
  .col-xxl-1 -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%;
  .col-xxl-2 -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;
  .col-xxl-3 -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;
  .col-xxl-4 -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;
  .col-xxl-5 -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%;
  .col-xxl-6 -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;
  .col-xxl-7 -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%;
  .col-xxl-8 -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%;
  .col-xxl-9 -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;
  .col-xxl-10 -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;
  .col-xxl-11 -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;
  .col-xxl-12 -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;

  /* order xxl */
  .order-xxl-0 -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0;
  .order-xxl-1 -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;
  .order-xxl-2 -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;
  .order-xxl-3 -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3;
  .order-xxl-4 -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4;
  .order-xxl-5 -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5;
  .order-xxl-6 -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6;
  .order-xxl-7 -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7;
  .order-xxl-8 -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8;
  .order-xxl-9 -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9;
  .order-xxl-10 -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10;
  .order-xxl-11 -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11;
  .order-xxl-12 -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12;

  /* text-align xxl */
  .text-xxl-center text-align: center!important;
  .text-xxl-left text-align: left!important;
  .text-xxl-right text-align: right!important;  

  /* float xxl */
  .float-xxl-left float: left!important;
  .float-xxl-right float: right!important;
  .float-xxl-none float: none!important;

  /* display xxl */
  .d-xxl-none display: none!important;
  .d-xxl-inline display: inline!important;
  .d-xxl-inline-block display: inline-block!important;
  .d-xxl-block display: block!important;
  .d-xxl-table display: table!important;
  .d-xxl-table-cell display: table-cell!important;
  .d-xxl-table-row display: table-row!important;
  .d-xxl-flex display: flex!important;
  .d-xxl-inline-flex display: inline-flex!important;

  /* offsets xxl */
  .offset-xxl-1 margin-left: 8.333333%;
  .offset-xxl-2 margin-left: 16.666667%;
  .offset-xxl-3 margin-left: 25%;
  .offset-xxl-4 margin-left: 33.333333%;
  .offset-xxl-5 margin-left: 41.666667%;
  .offset-xxl-6 margin-left: 50%;
  .offset-xxl-7 margin-left: 58.333333%;
  .offset-xxl-8 margin-left: 66.666667%;
  .offset-xxl-9 margin-left: 75%;
  .offset-xxl-10 margin-left: 83.333333%;
  .offset-xxl-11 margin-left: 91.666667%;

  /* spacing xxl */
  .m-xxl-0margin:0!important.mt-xxl-0,.my-xxl-0margin-top:0!important.mr-xxl-0,.mx-xxl-0margin-right:0!important.mb-xxl-0,.my-xxl-0margin-bottom:0!important.ml-xxl-0,.mx-xxl-0margin-left:0!important.m-xxl-1margin:.25rem!important.mt-xxl-1,.my-xxl-1margin-top:.25rem!important.mr-xxl-1,.mx-xxl-1margin-right:.25rem!important.mb-xxl-1,.my-xxl-1margin-bottom:.25rem!important.ml-xxl-1,.mx-xxl-1margin-left:.25rem!important.m-xxl-2margin:.5rem!important.mt-xxl-2,.my-xxl-2margin-top:.5rem!important.mr-xxl-2,.mx-xxl-2margin-right:.5rem!important.mb-xxl-2,.my-xxl-2margin-bottom:.5rem!important.ml-xxl-2,.mx-xxl-2margin-left:.5rem!important.m-xxl-3margin:1rem!important.mt-xxl-3,.my-xxl-3margin-top:1rem!important.mr-xxl-3,.mx-xxl-3margin-right:1rem!important.mb-xxl-3,.my-xxl-3margin-bottom:1rem!important.ml-xxl-3,.mx-xxl-3margin-left:1rem!important.m-xxl-4margin:1.5rem!important.mt-xxl-4,.my-xxl-4margin-top:1.5rem!important.mr-xxl-4,.mx-xxl-4margin-right:1.5rem!important.mb-xxl-4,.my-xxl-4margin-bottom:1.5rem!important.ml-xxl-4,.mx-xxl-4margin-left:1.5rem!important.m-xxl-5margin:3rem!important.mt-xxl-5,.my-xxl-5margin-top:3rem!important.mr-xxl-5,.mx-xxl-5margin-right:3rem!important.mb-xxl-5,.my-xxl-5margin-bottom:3rem!important.ml-xxl-5,.mx-xxl-5margin-left:3rem!important
  .p-xxl-0padding:0!important.pt-xxl-0,.py-xxl-0padding-top:0!important.pr-xxl-0,.px-xxl-0padding-right:0!important.pb-xxl-0,.py-xxl-0padding-bottom:0!important.pl-xxl-0,.px-xxl-0padding-left:0!important.p-xxl-1padding:.25rem!important.pt-xxl-1,.py-xxl-1padding-top:.25rem!important.pr-xxl-1,.px-xxl-1padding-right:.25rem!important.pb-xxl-1,.py-xxl-1padding-bottom:.25rem!important.pl-xxl-1,.px-xxl-1padding-left:.25rem!important.p-xxl-2padding:.5rem!important.pt-xxl-2,.py-xxl-2padding-top:.5rem!important.pr-xxl-2,.px-xxl-2padding-right:.5rem!important.pb-xxl-2,.py-xxl-2padding-bottom:.5rem!important.pl-xxl-2,.px-xxl-2padding-left:.5rem!important.p-xxl-3padding:1rem!important.pt-xxl-3,.py-xxl-3padding-top:1rem!important.pr-xxl-3,.px-xxl-3padding-right:1rem!important.pb-xxl-3,.py-xxl-3padding-bottom:1rem!important.pl-xxl-3,.px-xxl-3padding-left:1rem!important.p-xxl-4padding:1.5rem!important.pt-xxl-4,.py-xxl-4padding-top:1.5rem!important.pr-xxl-4,.px-xxl-4padding-right:1.5rem!important.pb-xxl-4,.py-xxl-4padding-bottom:1.5rem!important.pl-xxl-4,.px-xxl-4padding-left:1.5rem!important.p-xxl-5padding:3rem!important.pt-xxl-5,.py-xxl-5padding-top:3rem!important.pr-xxl-5,.px-xxl-5padding-right:3rem!important.pb-xxl-5,.py-xxl-5padding-bottom:3rem!important.pl-xxl-5,.px-xxl-5padding-left:3rem!important
  .m-xxl-automargin:auto!important.mt-xxl-auto,.my-xxl-automargin-top:auto!important.mr-xxl-auto,.mx-xxl-automargin-right:auto!important.mb-xxl-auto,.my-xxl-automargin-bottom:auto!important.ml-xxl-auto,.mx-xxl-automargin-left:auto!important

现在您将获得完全支持的 XXL 断点。我知道这不是最清晰的解决方案，因为我们只是覆盖了 Sass 编译的代码。如果你有能力使用 Sass - 这样做，这种方式更正确。但是使用 CDN，比如 quic-fix - 可以使用我的解决方案。

【讨论】：

thx，.col-xxl-10, 11, 12 处有小错误，并且缺少一些容器内容：.container-xxl width: 100%; padding-right: 15px;填充左：15px；边距右：自动；左边距：自动； @media (min-width: 1570px) .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl max-width: 1540px;

以上是关于如何使用 CDN 在 bootstrap 4 中创建新断点？的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 4 媒体查询 mixin 不能通过 CDN 与 Bootstrap 4 一起使用

html Bootstrap 4入门模板（CDN）

使用 Require.js 从 CDN 加载 Bootstrap

使用 bootstrap 5 cdn 时 Jquery 包含的菜单未显示在 html 页面上

如何使用 NavWalker 和 bootstrap.min.css 在 WordPress 中创建 Bootstrap 导航栏

如何使用 Bootstrap 4 和 Angular 7 在导航栏中制作多级下拉菜单