html - 如何在 Bootstrap 4 中添加新的大断点(仅限 CSS)

Question

我遇到了一个问题，当超大 Bootsrap 4 最大容器宽度(即 1140 像素)不够宽时。因为我希望我的网站在大显示器上也看起来不错，而且 Bootstrap 网格非常窄。扩展最大宽度最简单的方法是覆盖 .container 最大宽度，例如:

@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正确地做到这一点？

Answer 1

使用SASS在您的元素中添加文件custom.scss (你可以选择任何你想要的名字)

添加

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

@import "~bootstrap/scss/bootstrap";

现在您可以使用 xxl在 Bootstrap 中 mixins但是如果你想使用 col-xxl-* ，需要编译 custom.scss与 node-sass并使用该编译的 Bootstrap 文件作为您当前的 Bootstrap 文件。

文档: https://getbootstrap.com/docs/4.4/layout/grid/#grid-tiers

其他解决方案

使用以下站点创建断点并下载后。

https://themestr.app/customize