你的问题非常类似于如何使用 CDN 在 bootstrap 4 中创建新断点?
“是否可以通过编辑 CSS 文件在 Bootstrap 4 中设置自定义断点?”
Yes,但这需要添加一个lotCSS 支持新断点。每个断点在 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 将包含all新的col-xxl-*
, col-xxxl-*
等等以及所有其他响应类和媒体查询,如上所述。
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1366px,
xxxl: 1920px
);
Demo: https://codeply.com/go/vC6Ocuw1zo