如何在不重新编译的情况下自定义 Bootstrap 4 断点？-css教程-PHP中文网

如何在不重新编译的情况下自定义 Bootstrap 4 断点？

Susan Sarandon

发布： 2024-11-03 06:36:30

原创

946 人浏览过

How to Customize Bootstrap 4 Breakpoints Without Recompiling?

如何自定义 Bootstrap 4 断点

您希望在 Bootstrap 4 中将 xl 断点从 1200 全局修改为 1280。但是，为 Bootstrap 的 $grid-breakpoints 变量分配新值似乎不会更改 xl 断点。是否需要从头开始重新编译 Bootstrap 来完成此操作？

解决方案：在导入之前覆盖变量

自定义 Bootstrap 4 断点的关键是覆盖导入 Bootstrap 源之前的 $grid-breakpoints 和 $container-max-widths 变量。下面是在 Sass 中执行此操作的方法：

<code class="scss">// theme.scss
// Override default Bootstrap variables:
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

// Import Bootstrap sources
@import "~bootstrap/scss/bootstrap";

// Custom CSS rules here...</code>

登录后复制

现在，xl 断点将全局设置为 1280px，任何依赖于断点的 Bootstrap 样式（例如容器宽度）都将相应调整。

以上是如何在不重新编译的情况下自定义 Bootstrap 4 断点？的详细内容。更多信息请关注PHP中文网其他相关文章！