在我被彻底击倒在这里之前,我想不出任何其他的措辞或措辞的问题,除了我如何做如下。。。。
我想在引导程序4中为1366px和1920px设置2个额外的断点,因为引导程序的xl仅为1200px非常有限。
我的页面引用了bootstrap.min.css和bootstrap.bundle.min.js。
我添加了--breakpoint-xxl:1366px;--breakpoint-xxxl:1920px; 直接在断点之后-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%。
我是不是误解了怎么做了? 谢谢。 新泽西
您的问题与如何使用CDN在bootstrap 4中创建新的断点非常相似?
“仅仅通过编辑CSS文件就可以在Bootstrap 4中设置自定义断点吗?”
是的,但是它需要添加大量的CSS来支持新的断点。 每个断点在引导CSS中被引用超过280次。 因此,添加2个新断点将为CSS添加500多个新类。 请记住,断点不仅仅用于网格col-*
,断点还用于许多其他响应功能,如flexbox,alignment&; 显示实用程序。
“我已在boostrap.min.css文件中的--breakpoint-xxl:1366px;--breakpoint-xxxl:1920px;后面直接添加了--breakpoint-xl:1200px;”
这些是CSS变量。 如果您想在@Media查询中引用CSS变量,则可以使用它们,但它们不会神奇地为新断点添加新的类。
“我想在引导程序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://www.codeply.com/go/vc6ocuw1zo