是否可以仅通过编辑CSS文件在Bootstrap 4中设置自定义断点? [英] Is it possible to set custom breakpoints in Bootstrap 4 just by editing the CSS files?

问题描述

在我被彻底击落之前，除了我的工作方式如下，我想不出其他任何措辞或措辞的方式了.

Before I get completely shot down in flames on here, I can't think of any other way of wording or phrasing this question other than how I'm doing as follows....

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

I would like to set 2 additional breakpoints in Bootstrap 4 for 1366px and 1920px as Bootstrap's xl is very limited at just 1200px.

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

My page references bootstrap.min.css and bootstrap.bundle.min.js.

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

I have added --breakpoint-xxl:1366px;--breakpoint-xxxl:1920px; directly after --breakpoint-xl:1200px; in the boostrap.min.css file and I've then created two columns as follows:

<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％.

When I preview this in the browser at 1366 and 1920 the columns are not adjusting to 50%/50%.

我是否误解了该怎么做? 谢谢你. 新泽西州

Have I misunderstood how to do this? Thank you. NJ

推荐答案

您的问题与

仅通过编辑CSS文件就可以在Bootstrap 4中设置自定义断点吗?"

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

是，但是需要添加CSS的 lot 来支持新的断点.每个断点在Bootstrap CSS中被引用超过280次.因此，添加2个新的断点将为CSS添加500多个新类.请记住，断点不仅用于网格col-*，还用于许多其他响应功能，例如弹性框，对齐方式和&显示实用程序.

Yes, but it would require adding a lot of CSS to support the new breakpoints. Each breakpoint is referenced more than 280 times in the Bootstrap CSS. Therefore, adding 2 new breakpoints would add more than 500 new classes to the CSS. Remember that the breakpoints aren't just used for the grid col-*, the breakpoints are also used for many other responsive features like the flexbox, alignment & display utilities.

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

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

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

These are CSS variables. The CSS variables can used if you want to reference them in a @media query, but they're not going to magically add new classes for the new breakpoints.

我想在Bootstrap 4中为1366px和1920px设置2个附加断点"

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

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

This would be done using SASS as explained here. The SASS gets compiled to CSS. You would just add the grid-breakpoints. The generated CSS would contain all of the new col-xxl-*, col-xxxl-*, etc.. and all of the other responsive classes and media queries as explained above.

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

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

这篇关于是否可以仅通过编辑CSS文件在Bootstrap 4中设置自定义断点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！