是否可以通过编辑 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

您的问题与

非常相似

"Is it possible to set custom breakpoints in Bootstrap 4 just by editing the CSS files?"

是，但需要添加 lot of CSS 以支持新的断点。每个断点在 Bootstrap CSS 中被引用超过 280 次。因此，添加 2 个新断点将在 CSS 中添加 500 多个新类。请记住，断点不仅用于网格 col-*，断点还用于许多其他响应功能，例如 flexbox, alignment & display utilities.

"I have added --breakpoint-xxl:1366px;--breakpoint-xxxl:1920px; directly after --breakpoint-xl:1200px; in the boostrap.min.css file"

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

"I would like to set 2 additional breakpoints in Bootstrap 4 for 1366px and 1920px"

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

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

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

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

Is it possible to set custom breakpoints in Bootstrap 4 just by editing the CSS files?

css

sass

bootstrap-4

breakpoints

css-variables