Question

我正在尝试覆盖默认的Bootstrap 4（v4.1.3）断点，并将其转换为ems。

我首先使用以下内容覆盖了$grid-breakpoints变量：

$grid-breakpoints: (
    xs: 0,
    sm: 36.000em,
    md: 48.000em,
    lg: 62.000em,
    xl: 75.000em
);

但是，当我尝试编译时，出现以下错误：

Message:
    assets/sass/vendor/bootstrap/mixins/_breakpoints.scss
Error: Incompatible units: 'px' and 'em'.
        on line 42 of assets/sass/0.vendor/bootstrap/mixins/_breakpoints.scss
>>   @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);

在计算中使用px的混音之一似乎有问题。

关于如何解决此问题的任何想法？

Answer 1

错误告诉您确切的问题。 42的第_breakpoints.scss行是：

@return if（$ next，breakpoint-min（$ next，$ breakpoints）-.02px，null）;

如果要使用em，请确保替换所有px的实例。

Answer 2

为了覆盖Bootstrap媒体查询，您只能编辑Bootstrap源文件。您需要将在_breakpoints.scss mixins文件中找到的所有值转换为ems。

但是，请谨慎行事，只有在您有足够的时间进行测试时才这样做-这里有些细微差别，因为您会发现是否阅读了在开发Bootstrap 4时所讨论的这些线程：

在这里，他们基本上说他们会坚持使用px，因为我遇到了同样的问题-它在编译时会中断。因此，在当时，它被认为是Bootstrap V4的一项重大突破，对于V5而言，这是一个考虑因素：

https://github.com/twbs/bootstrap/pull/27190

这里是冗长的讨论，讨论了在媒体查询中使用em单元的优缺点。 这是我要提醒您的地方，首先考虑您是否有时间测试所有方案-因为如果您将媒体查询更改为em，则还需要考虑更改容器max-widths，并且我猜想，还有其他一些使用px的值-混合使用这些值不是一个好主意，从长远来看可能会导致无法预料的头痛。

https://github.com/twbs/bootstrap/pull/17403

如果您像我一样，并且使用Bootstrap是因为

它已经过全面测试
它可以让您在时间短，预算低

然后我建议将其保留为默认的px值，并希望他们会在Bootstrap 5中重新考虑此功能。

Bootstrap 4-覆盖断点-转换为em

2 个答案: