如何在 Bootstrap 4 中添加新的大断点（仅限 CSS）
Posted
技术标签:
【中文标题】如何在 Bootstrap 4 中添加新的大断点（仅限 CSS）【英文标题】：How to add new, large breakpoint in Bootstrap 4 (CSS Only) 【发布时间】：2020-08-08 21:58:06 【问题描述】：我遇到了一个问题，当超大 Bootsrap 4 最大容器宽度（即 1140 像素）不够宽时。因为我希望我的网站在大显示器上也看起来不错，而且引导网格非常窄。扩展最大宽度最简单的方法是覆盖 .container max-width，如：
@media (min-width: 1200px)
.container
max-width: 1540px;
但我不仅想扩展xl max-width。我希望添加一个新的成熟断点，包括所有 BS4 网格可能性、列、显示模式、间距等。比如col-xxl 或其他东西。结果应该是这样的：
<div class="col-xxl-2 col-xl-3 col-md-4 col-sm-6 text-xxl-center"></div>
任何想法，如何使用 CSS 正确地做到这一点？
【问题讨论】：
为此您需要使用SASS
最简单的方法是从 SASS 编译，即在 this file 中搜索 $grid-breakpoints:
SASS 现在对我来说很难，我正在寻找简单的 css 解决方案。
【参考方案1】：
在你的项目中使用SASS并添加文件custom.scss（你可以选择任何你想要的名字）
添加
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1600px
);
@import "~bootstrap/scss/bootstrap";
现在您可以在引导程序mixins 中使用xxl，但如果您想使用col-xxl-*，您需要编译custom.scss 和node-sass，并将编译后的引导程序文件用作您当前的引导程序文件。
文档：https://getbootstrap.com/docs/4.4/layout/grid/#grid-tiers
其他解决方案
使用下面的站点创建断点并下载后。
https://themestr.app/customize
【讨论】：
你有简单的css解决方案吗？ @Pavel.T，使用我的其他解决方案 谢谢，我将在我未来的项目中使用这个解决方案。我不精通 SASS。 使用themestr.app，您可以添加新断点并下载CSS。 您的回答很棒。如果您熟悉 Sass - 这是唯一正确的解决方案。关于 themestr.app - 也很不错，但如果我想更新我的引导版本 - 每次在所有站点上自定义 BS 都太复杂了。在某些情况下，只需添加 CSS 快速修复就足够了。但是，无论如何，你的答案很好，我也为自己学到了一些新东西。向上【参考方案2】：幸运的是，我在我的一些项目中提出了解决方案，完全符合您的要求。 遇到同样的问题，做了一点 CSS 扩展。
只需创建一个 bootstrap-grid-xxl.css，或者您可以使用任何 css 样式表，只要确保它应该在原始 bootstrap 4 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
这应该是 Sass 上的解决方案。但是我对BS4的Sass结构并不那么强。我认为，如果您熟悉 BS4 Sass - 您可以使用与我上面代码中相同的原理添加 XXL 断点。
【讨论】：
不能这样用，会影响CSS的一些特殊性概念 为什么我不能这样做？它在我的项目中完美运行。例如，在 OpenCart 商店中。 你不能像这样覆盖所有属性，对我来说这不是一个有效的解决方案，但它是可行的解决方案。 例如，所有的 Opencart 默认模板都是在 Bootstrap 上制作的。原始 OC 样式表中有很多 BS 修复。也许这不是一个纯粹有效的解决方案，但我认为 CSS 清晰的解决方案也应该发生。 .col-xxl-10 .col-xxl-11 .col-xxl-12 有错误，接近 % 部分 + 代码周围有多个错误。【参考方案3】：以上答案都不适合我，所以我基于 Bootstrap 4.6.0 创建了以下gist。
默认情况下，它会将您的 .container 更改为新的 1600 大小，但您只需注释掉前两个块即可禁用它。
// Adapted from bootstrap 4.6.0
.container-xxl
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
// 95%
@media (min-width: 1600px)
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl
max-width: 1520px;
.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,
.col-xxl-auto
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
@media (min-width: 1600px)
.col-xxl
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
.row-cols-xxl-1 > *
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
.row-cols-xxl-2 > *
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
.row-cols-xxl-3 > *
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
.row-cols-xxl-4 > *
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
.row-cols-xxl-5 > *
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
.row-cols-xxl-6 > *
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
.col-xxl-auto
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%;
.col-xxl-1
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
.col-xxl-2
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
.col-xxl-3
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
.col-xxl-4
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
.col-xxl-5
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
.col-xxl-6
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
.col-xxl-7
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
.col-xxl-8
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
.col-xxl-9
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
.col-xxl-10
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
.col-xxl-11
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
.col-xxl-12
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
.order-xxl-first
-ms-flex-order: -1;
order: -1;
.order-xxl-last
-ms-flex-order: 13;
order: 13;
.order-xxl-0
-ms-flex-order: 0;
order: 0;
.order-xxl-1
-ms-flex-order: 1;
order: 1;
.order-xxl-2
-ms-flex-order: 2;
order: 2;
.order-xxl-3
-ms-flex-order: 3;
order: 3;
.order-xxl-4
-ms-flex-order: 4;
order: 4;
.order-xxl-5
-ms-flex-order: 5;
order: 5;
.order-xxl-6
-ms-flex-order: 6;
order: 6;
.order-xxl-7
-ms-flex-order: 7;
order: 7;
.order-xxl-8
-ms-flex-order: 8;
order: 8;
.order-xxl-9
-ms-flex-order: 9;
order: 9;
.order-xxl-10
-ms-flex-order: 10;
order: 10;
.order-xxl-11
-ms-flex-order: 11;
order: 11;
.order-xxl-12
-ms-flex-order: 12;
order: 12;
.offset-xxl-0
margin-left: 0;
.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%;
// group 3
@media (min-width: 1600px)
.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-row
display: table-row !important;
.d-xxl-table-cell
display: table-cell !important;
.d-xxl-flex
display: -ms-flexbox !important;
display: flex !important;
.d-xxl-inline-flex
display: -ms-inline-flexbox !important;
display: inline-flex !important;
// group 4
@media (min-width: 1600px)
.flex-xxl-row
-ms-flex-direction: row !important;
flex-direction: row !important;
.flex-xxl-column
-ms-flex-direction: column !important;
flex-direction: column !important;
.flex-xxl-row-reverse
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important;
.flex-xxl-column-reverse
-ms-flex-direction: column-reverse !important;
flex-direction: column-reverse !important;
.flex-xxl-wrap
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important;
.flex-xxl-nowrap
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
.flex-xxl-wrap-reverse
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important;
.flex-xxl-fill
-ms-flex: 1 1 auto !important;
flex: 1 1 auto !important;
.flex-xxl-grow-0
-ms-flex-positive: 0 !important;
flex-grow: 0 !important;
.flex-xxl-grow-1
-ms-flex-positive: 1 !important;
flex-grow: 1 !important;
.flex-xxl-shrink-0
-ms-flex-negative: 0 !important;
flex-shrink: 0 !important;
.flex-xxl-shrink-1
-ms-flex-negative: 1 !important;
flex-shrink: 1 !important;
.justify-content-xxl-start
-ms-flex-pack: start !important;
justify-content: flex-start !important;
.justify-content-xxl-end
-ms-flex-pack: end !important;
justify-content: flex-end !important;
.justify-content-xxl-center
-ms-flex-pack: center !important;
justify-content: center !important;
.justify-content-xxl-between
-ms-flex-pack: justify !important;
justify-content: space-between !important;
.justify-content-xxl-around
-ms-flex-pack: distribute !important;
justify-content: space-around !important;
.align-items-xxl-start
-ms-flex-align: start !important;
align-items: flex-start !important;
.align-items-xxl-end
-ms-flex-align: end !important;
align-items: flex-end !important;
.align-items-xxl-center
-ms-flex-align: center !important;
align-items: center !important;
.align-items-xxl-baseline
-ms-flex-align: baseline !important;
align-items: baseline !important;
.align-items-xxl-stretch
-ms-flex-align: stretch !important;
align-items: stretch !important;
.align-content-xxl-start
-ms-flex-line-pack: start !important;
align-content: flex-start !important;
.align-content-xxl-end
-ms-flex-line-pack: end !important;
align-content: flex-end !important;
.align-content-xxl-center
-ms-flex-line-pack: center !important;
align-content: center !important;
.align-content-xxl-between
-ms-flex-line-pack: justify !important;
align-content: space-between !important;
.align-content-xxl-around
-ms-flex-line-pack: distribute !important;
align-content: space-around !important;
.align-content-xxl-stretch
-ms-flex-line-pack: stretch !important;
align-content: stretch !important;
.align-self-xxl-auto
-ms-flex-item-align: auto !important;
align-self: auto !important;
.align-self-xxl-start
-ms-flex-item-align: start !important;
align-self: flex-start !important;
.align-self-xxl-end
-ms-flex-item-align: end !important;
align-self: flex-end !important;
.align-self-xxl-center
-ms-flex-item-align: center !important;
align-self: center !important;
.align-self-xxl-baseline
-ms-flex-item-align: baseline !important;
align-self: baseline !important;
.align-self-xxl-stretch
-ms-flex-item-align: stretch !important;
align-self: stretch !important;
// group 5
@media (min-width: 1600px)
.m-xxl-0
margin: 0 !important;
.mt-xxl-0,
.my-xxl-0
margin-top: 0 !important;
.mr-xxl-0,
.mx-xxl-0
margin-right: 0 !important;
.mb-xxl-0,
.my-xxl-0
margin-bottom: 0 !important;
.ml-xxl-0,
.mx-xxl-0
margin-left: 0 !important;
.m-xxl-1
margin: 0.25rem !important;
.mt-xxl-1,
.my-xxl-1
margin-top: 0.25rem !important;
.mr-xxl-1,
.mx-xxl-1
margin-right: 0.25rem !important;
.mb-xxl-1,
.my-xxl-1
margin-bottom: 0.25rem !important;
.ml-xxl-1,
.mx-xxl-1
margin-left: 0.25rem !important;
.m-xxl-2
margin: 0.5rem !important;
.mt-xxl-2,
.my-xxl-2
margin-top: 0.5rem !important;
.mr-xxl-2,
.mx-xxl-2
margin-right: 0.5rem !important;
.mb-xxl-2,
.my-xxl-2
margin-bottom: 0.5rem !important;
.ml-xxl-2,
.mx-xxl-2
margin-left: 0.5rem !important;
.m-xxl-3
margin: 1rem !important;
.mt-xxl-3,
.my-xxl-3
margin-top: 1rem !important;
.mr-xxl-3,
.mx-xxl-3
margin-right: 1rem !important;
.mb-xxl-3,
.my-xxl-3
margin-bottom: 1rem !important;
.ml-xxl-3,
.mx-xxl-3
margin-left: 1rem !important;
.m-xxl-4
margin: 1.5rem !important;
.mt-xxl-4,
.my-xxl-4
margin-top: 1.5rem !important;
.mr-xxl-4,
.mx-xxl-4
margin-right: 1.5rem !important;
.mb-xxl-4,
.my-xxl-4
margin-bottom: 1.5rem !important;
.ml-xxl-4,
.mx-xxl-4
margin-left: 1.5rem !important;
.m-xxl-5
margin: 3rem !important;
.mt-xxl-5,
.my-xxl-5
margin-top: 3rem !important;
.mr-xxl-5,
.mx-xxl-5
margin-right: 3rem !important;
.mb-xxl-5,
.my-xxl-5
margin-bottom: 3rem !important;
.ml-xxl-5,
.mx-xxl-5
margin-left: 3rem !important;
.p-xxl-0
padding: 0 !important;
.pt-xxl-0,
.py-xxl-0
padding-top: 0 !important;
.pr-xxl-0,
.px-xxl-0
padding-right: 0 !important;
.pb-xxl-0,
.py-xxl-0
padding-bottom: 0 !important;
.pl-xxl-0,
.px-xxl-0
padding-left: 0 !important;
.p-xxl-1
padding: 0.25rem !important;
.pt-xxl-1,
.py-xxl-1
padding-top: 0.25rem !important;
.pr-xxl-1,
.px-xxl-1
padding-right: 0.25rem !important;
.pb-xxl-1,
.py-xxl-1
padding-bottom: 0.25rem !important;
.pl-xxl-1,
.px-xxl-1
padding-left: 0.25rem !important;
.p-xxl-2
padding: 0.5rem !important;
.pt-xxl-2,
.py-xxl-2
padding-top: 0.5rem !important;
.pr-xxl-2,
.px-xxl-2
padding-right: 0.5rem !important;
.pb-xxl-2,
.py-xxl-2
padding-bottom: 0.5rem !important;
.pl-xxl-2,
.px-xxl-2
padding-left: 0.5rem !important;
.p-xxl-3
padding: 1rem !important;
.pt-xxl-3,
.py-xxl-3
padding-top: 1rem !important;
.pr-xxl-3,
.px-xxl-3
padding-right: 1rem !important;
.pb-xxl-3,
.py-xxl-3
padding-bottom: 1rem !important;
.pl-xxl-3,
.px-xxl-3
padding-left: 1rem !important;
.p-xxl-4
padding: 1.5rem !important;
.pt-xxl-4,
.py-xxl-4
padding-top: 1.5rem !important;
.pr-xxl-4,
.px-xxl-4
padding-right: 1.5rem !important;
.pb-xxl-4,
.py-xxl-4
padding-bottom: 1.5rem !important;
.pl-xxl-4,
.px-xxl-4
padding-left: 1.5rem !important;
.p-xxl-5
padding: 3rem !important;
.pt-xxl-5,
.py-xxl-5
padding-top: 3rem !important;
.pr-xxl-5,
.px-xxl-5
padding-right: 3rem !important;
.pb-xxl-5,
.py-xxl-5
padding-bottom: 3rem !important;
.pl-xxl-5,
.px-xxl-5
padding-left: 3rem !important;
.m-xxl-n1
margin: -0.25rem !important;
.mt-xxl-n1,
.my-xxl-n1
margin-top: -0.25rem !important;
.mr-xxl-n1,
.mx-xxl-n1
margin-right: -0.25rem !important;
.mb-xxl-n1,
.my-xxl-n1
margin-bottom: -0.25rem !important;
.ml-xxl-n1,
.mx-xxl-n1
margin-left: -0.25rem !important;
.m-xxl-n2
margin: -0.5rem !important;
.mt-xxl-n2,
.my-xxl-n2
margin-top: -0.5rem !important;
.mr-xxl-n2,
.mx-xxl-n2
margin-right: -0.5rem !important;
.mb-xxl-n2,
.my-xxl-n2
margin-bottom: -0.5rem !important;
.ml-xxl-n2,
.mx-xxl-n2
margin-left: -0.5rem !important;
.m-xxl-n3
margin: -1rem !important;
.mt-xxl-n3,
.my-xxl-n3
margin-top: -1rem !important;
.mr-xxl-n3,
.mx-xxl-n3
margin-right: -1rem !important;
.mb-xxl-n3,
.my-xxl-n3
margin-bottom: -1rem !important;
.ml-xxl-n3,
.mx-xxl-n3
margin-left: -1rem !important;
.m-xxl-n4
margin: -1.5rem !important;
.mt-xxl-n4,
.my-xxl-n4
margin-top: -1.5rem !important;
.mr-xxl-n4,
.mx-xxl-n4
margin-right: -1.5rem !important;
.mb-xxl-n4,
.my-xxl-n4
margin-bottom: -1.5rem !important;
.ml-xxl-n4,
.mx-xxl-n4
margin-left: -1.5rem !important;
.m-xxl-n5
margin: -3rem !important;
.mt-xxl-n5,
.my-xxl-n5
margin-top: -3rem !important;
.mr-xxl-n5,
.mx-xxl-n5
margin-right: -3rem !important;
.mb-xxl-n5,
.my-xxl-n5
margin-bottom: -3rem !important;
.ml-xxl-n5,
.mx-xxl-n5
margin-left: -3rem !important;
.m-xxl-auto
margin: auto !important;
.mt-xxl-auto,
.my-xxl-auto
margin-top: auto !important;
.mr-xxl-auto,
.mx-xxl-auto
margin-right: auto !important;
.mb-xxl-auto,
.my-xxl-auto
margin-bottom: auto !important;
.ml-xxl-auto,
.mx-xxl-auto
margin-left: auto !important;
【讨论】：
以上是关于如何在 Bootstrap 4 中添加新的大断点（仅限 CSS）的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 CDN 在 bootstrap 4 中创建新断点？