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

您的问题与How to create new breakpoints in bootstrap 4 using CDN?

非常相似

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

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

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

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

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

这将using SASS as explained here完成。 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://www.codeply.com/go/vC6Ocuw1zo

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

1 个答案: