是否可以通过编辑 CSS 文件在 Bootstrap 4 中设置自定义断点？

Question

在我在这里完全被火焰击落之前，除了我的做法如下之外，我想不出任何其他方式来措辞或表达这个问题......

我想在 Bootstrap 4 中为 1366px 和 1920px 设置 2 个额外的断点，因为 Bootstrap 的 xl 非常有限，只有 1200px。

我的页面引用了 bootstrap.min.css 和 bootstrap.bundle.min.js。

我添加了 --breakpoint-xxl:1366px;--breakpoint-xxxl:1920px; 紧接在 --breakpoint-xl:1200px 之后；在 boostrap.min.css 文件中，我创建了两列，如下所示：

<div class="col-xxxl-6 col-xxl-6 col-xl-12 col-lg-6 col-md-6 col-sm-6">
     Column 1 Content
</div>
<div class="col-xxxl-6 col-xxl-6 col-xl-12 col-lg-6 col-md-6 col-sm-6">
     Column 2 Content
</div>

当我在浏览器中以 1366 和 1920 预览此内容时，列没有调整为 50%/50%。

我是否误解了如何做到这一点？谢谢。新泽西州

Answer 1

您的问题与如何使用 CDN 在 bootstrap 4 中创建新断点非常相似？

“是否可以通过编辑 CSS 文件在 Bootstrap 4 中设置自定义断点？”

是的，但是需要添加大量CSS来支持新断点。每个断点在 Bootstrap CSS 中被引用超过 280 次。因此，添加 2 个新断点将会向 CSS 添加超过 500 个新类。请记住，断点不仅仅用于网格col-*，断点还用于许多其他响应功能，例如Flexbox、对齐和显示实用程序。

“我在 boostrap.min.css 文件中直接在 --breakpoint-xl:1200px; 之后添加了 --breakpoint-xxl:1366px;--breakpoint-xxxl:1920px; ”

这些是CSS 变量。如果您想在 @media 查询中引用 CSS 变量，则可以使用它们，但它们不会神奇地为新断点添加新类。

“我想在 Bootstrap 4 中为 1366px 和 1920px 设置 2 个额外断点”

这可以使用 SASS 来完成，如此处所述。SASS 被编译为 CSS。您只需添加网格断点即可。生成的 CSS 将包含所有新col-xxl-*的col-xxxl-*、 等以及所有其他响应类和媒体查询，如上所述。

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

演示： https: //codeply.com/go/vC6Ocuw1zo