我使用BootstrapCDN.其他样式用sass编写并由gulp构建.我需要创建自己的breakpionts.如果我使用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,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;
- }
但它不会产生结果,并产生错误：
Illegal nesting: Nothing may be nested beneath variable declarations.
我做错了什么？
预先感谢您的帮助.
UPD：如果那是不可能的……还有其他选择吗？我可以轻松编辑我的代码以使用我的断点模拟引导网格吗？
- $grid-breakpoints: (xxxs: 0,xxxl: 1600px)!default
- $container-max-widths: (xxxs: 0,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
但它并没有解决我的问题.
解决方法
它不能完全来自CDN.要使用SASS正确定制/覆盖,您需要在custom.scss中@import必要的Bootstrap scss文件.要覆盖网格断点,至少需要函数和变量.然后根据需要设置变量,最后设置@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,xxxl: 1600px
- );
- $container-max-widths: (
- xxxs: 0,xxxl: 1600px
- );
- /* override the !default vars with the values we set above */
- @import "bootstrap";
使用这种方法,我们添加了新的网格断点,并确保这些新的断点在Bootstrap中无处不在,包括网格,用于间距,显示,弹性框,对齐,定位等的响应实用程序……
https://www.codeply.com/go/BIgmm1XGc2
另见：
How to extend/modify (customize) Bootstrap 4 with SASS
Twitter Bootstrap: add media queries for xxs breakpoint